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?
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!