CODEWITHSUNDEEP
accessibilitycontrast
Paeon
Paeon

Reputation: 85

Color contrast accessibility checker

has anyone worked with https://contrastchecker.com/

I just tried #FF0000 as foreground and #FFFFFF as background. It says AA 12 pt, AAA 12 pt, and AAA 18+ all fail. But then it says under "colors" that I passed and am fully color compliant? How can the colors fail the type test but pass the colors test?

Upvotes: 0

Views: 1276

Answers (2)

Michael Abeln
Michael Abeln

Reputation: 2587

So, there's a few different metrics at play here.

The TYPE test is measuring the contrast between foreground and background – this metric is based first on the relative luminance of the type in the foreground, and the luminance of the background, those luminance values are then used to calculate contrast.

The COLOR test is measuring the hue difference between foreground and background – hue is a different calculation than contrast is, so one can fail while the other passes.

For the most part, it's best practice to make your color choices based on results from the TYPE test (contrast), but there are cases where the result would be less accessible.

The Paciello Group makes a really great contrast analyzer app:
https://developer.paciellogroup.com/resources/contrastanalyser/

I highly recommend it as it has a feature to simulate the effects of different types of colorblindness on the selected foreground / background combination.

An Example:

Red (#FF0000) Foreground and Black (#000000) Background
- Passes at AA small and AAA large text with a ratio of 5.3:1
- Fails color difference with value of 255 (minimum is 500)
- Fails Brightness difference with a value of 76 (minimum is 125)
- 3/5 simulated types of colorblindness show the type as nearly invisible!
Even though the type test PASSES the result is not accessible!


Red (#FF0000) Foreground and White (#FFFFFF) Background
- Passes only at AA large text with a ratio of 4:1
- Passes color difference with value of 510 (minimum is 500)
- Passes brightness difference with a value of 179 (minimum is 125)
- 5/5 simulated types of colorblindness show very legible text!
Even though the type test FAILS the result is more accessible!

Upvotes: 1

Adam
Adam

Reputation: 18807

As indicated by the tooltip over the "COLOR" test, this does not only test the color difference (for color blind people for instance) but also the brightness difference (which is the contrast):

This is based on brightness and color difference. A pass grade here means you are fully color compliant.

This is based on an old W3C Working Draft named "Techniques For Accessibility Evaluation And Repair Tools". See Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen

This test is no longer recommended and has been replaced by latest WCAG recommendations (and painful - but necessary - calculations)

Upvotes: 1

Related Questions