contrast-ratio | contrast ratio between any two valid CSS colors

by LeaVerou JavaScript Version: v1.0.0 License: MIT

X-Ray Key Features Code Snippets(2)Community Discussions(5)Vulnerabilities Install Support

kandi X-RAY | contrast-ratio Summary

contrast-ratio is a JavaScript library. contrast-ratio has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

A tool to calculate the contrast ratio between any two valid CSS colors.

Support

Quality

Security

License

Reuse

Support

contrast-ratio has a medium active ecosystem.

It has 2450 star(s) with 217 fork(s). There are 65 watchers for this library.

It had no major release in the last 12 months.

There are 9 open issues and 17 have been closed. On average issues are closed in 692 days. There are 1 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of contrast-ratio is v1.0.0

Quality

contrast-ratio has no bugs reported.

Security

contrast-ratio has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

contrast-ratio is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

contrast-ratio releases are available to install and integrate.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of contrast-ratio

Get all kandi verified functions for this library.

contrast-ratio Key Features

No Key Features are available at this moment for contrast-ratio.

contrast-ratio Examples and Code Snippets

Test for two colors .

java

Lines of Code : 25

License : Permissive (MIT License)

Copy

private static void test() {
        final ColorContrastRatio algImpl = new ColorContrastRatio();

        final Color black = Color.BLACK;
        final double blackLuminance = algImpl.getRelativeLuminance(black);
        assert blackLuminance == 0

Get the contrast ratio between two colors

java

Lines of Code : 10

License : Permissive (MIT License)

Copy

public double getContrastRatio(Color a, Color b) {
        final double aColorLuminance = getRelativeLuminance(a);
        final double bColorLuminance = getRelativeLuminance(b);

        if (aColorLuminance > bColorLuminance) {
            return

Community Discussions

Trending Discussions on contrast-ratio

SCSS: Alert Component - change the SVG color based on background color?

Convert from relative luminance to HSL

If colours are accessible, will a gradient between those colours be accessible?

Are bootstrap outline styles accessible by default?

How do I make material design components such as button ripples and shadows compliant with AAA accessibility?

QUESTION

SCSS: Alert Component - change the SVG color based on background color?

Asked 2020-Dec-05 at 15:48

I want to change the Close Button SVG Color based on what color is used in background I'm using some Sass functions * ($_luminance-list, color-contrast, contrast-ratio, luminance) to control the colors.*

Codepen example:

codepen

Here is the Current result:

What I want to achieve:

My Full Code include the functions that I using.

...

ANSWER

Answered 2020-Dec-05 at 15:44

Simply remove the filter on .btn-close, this part:

Source https://stackoverflow.com/questions/65130675

QUESTION

Convert from relative luminance to HSL

Asked 2020-May-12 at 21:03

Given a certain color in HSL (let's say hsl(74,64%,59%)), I want to calculate what darker shade (with the same h and s values) gives me enough contrast to satisfy W3C color contrast requirements.

There are formulas to convert HSL to RGB (for example https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB) and to calculate the relative luminance from that RGB (for example https://www.w3.org/TR/WCAG20/#relativeluminancedef). Based on the color contrast formula (https://www.w3.org/TR/WCAG20/#contrast-ratiodef) I can calculate what the relative luminance for my other color should be.

However, then I'm stuck. I find no way to calculate back from a given relative luminance, to an HSL color with given h and s.

Using tools like https://contrast-ratio.com/ I can just decrease the lightness until it satisfies the requirements, but I would like a formula (preferably in JavaScript) to do this calculation for a large selection of colors.

(I am currently using a binary search method to find the closest value, by testing many conversions from HSL to RGB to relative lightness, but that is quite intensive plus I wonder if the conversion to RGB in between introduces inaccuracies.)

...

ANSWER

Answered 2020-May-12 at 21:03

Hope this is what you need

Using the formulas in this SO answer, and below:

Source https://stackoverflow.com/questions/61525100

QUESTION

If colours are accessible, will a gradient between those colours be accessible?

Asked 2020-Feb-16 at 06:39

I work on websites where accessibility is an absolute must have, we aim for at least AA standard. Typically we use resources such as https://contrast-ratio.com and https://contrastchecker.com to test a background colour against black or white text.

In this instance let's take white (#fff) text at a size of 18px. Colour one: #546FAF has a ratio of 4.92 Colour two: #B349B1 has a ratio of 4.66

If I made a linear gradient between those two colours as a background, would #fff text at 18px be safe accessibility wise? I've tried colour picking colours near the text that look close, but hoping it's a simple answer of during that gradient it would never go below the 4.5 ratio.

Thanks!

...

ANSWER

Answered 2020-Feb-04 at 21:48

Yes you will be safe if both of your colours pass contrast ratio tests, but this is assuming white on a darker gradient background (as you have indicated), for dark colours on a gradient background the opposite is true.

Gradients of two equal (or nearly equal) luminance values when combined tend to get a slight lower luminance value in the middle.

Contrast between two colours is based on luminance using the following formula:-

(L1 + 0.05) / (L2 + 0.05)

where L1 is the relative luminance of the lighter of the colours,

and L2 is the relative luminance of the darker of the colours.

So because gradients tend to get darker in the middle on two similar luminance values you can see that the contrast ratio will increase in the middle (L2 decreases as it gets closer to black, L1 will not change). For this reason the whole spectrum of colour will be above the threshold, with the highest contrast tending towards the centre.

However if you use a dark colour as the foreground colour, then when the gradient darkens in the middle the contrast ratio will decrease (L2 will not change, L1 will decrease).

Source https://stackoverflow.com/questions/60060018

QUESTION

Are bootstrap outline styles accessible by default?

Asked 2019-Apr-09 at 09:44

Let's say I'm using the latest bootstrap. I have my primary color sass variable set to black, so that would mean the default button outline color would be rgba(0, 0, 0, .25), which does not pass WCAG 2.0. Should I override bootstrap's default outline styles for more accessible ones, or does the color contrast of outlines not matter?

...

ANSWER

Answered 2019-Apr-09 at 09:44

Color contrast always matters, whether it is the outlines or any other graphical element of the user interface.

For people using their keyboard to navigate through pages elements and focus them, and who only use visual indication (i.e. not screen readers), developers have to provide some visual hint to let them know the element is focused.

If you change a focused element background color to be visually identified, then outline will not really matter. But if you don't address focus state styles, you should rely on the outline for the focus state styles. In this case, you need to make sure outline styles passe the accessibility tests.

Source https://stackoverflow.com/questions/55584069

QUESTION

How do I make material design components such as button ripples and shadows compliant with AAA accessibility?

Asked 2019-Feb-13 at 13:44

I'm planning on my website having material-inspired design without using a framework. How can I use such iconic material components such as the button ripple and elevation without sacrificing AAA color contrast?

Shadow

I want to use the .gmd-2 material shadow from this codepen. It uses two shadows, one with the color rgba(0, 0, 0, 0.16), and the other with the color rgba(0, 0, 0, 0.23), both of which fail AA with a white background, according to https://contrast-ratio.com.

Ripple

I want to use the Waves light ripple, which is the ripple color rgba(255,255,255,0.4), which doesn't pass AAA even in black.

...

ANSWER

Answered 2019-Feb-13 at 13:44

You should measure color contrast of text but not shadows of blocks.

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.

https://dequeuniversity.com/rules/axe/3.1/color-contrast?application=AxeChrome

Use right accessibility testing tools https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

Source https://stackoverflow.com/questions/54641671

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install contrast-ratio

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: