6

I was planning on using #663399 and #f8f8f8 as a foreground and background color.

The Color Contrast Tool, like others, is passing the contrast ratio as described by WCAG, but is failing color difference with 438 out of a minimum of 500.

  • Does WCAG only use the contrast ratio and text size, and not color difference?

  • How is color difference calculated?

  • Would improving this color difference help the visually impaired or is the the contrast already sufficient?

<code>#663399</code> contrast ratio of 7.9:1 <code>#663399</code> color difference 438 of 500 <code>#663399</code> color deficient ratio of 7.9:1

Improve this question

2 Answers 2

Reset to default
5

The W3C Techniques For Accessibility Evaluation And Repair Tools says:

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula: (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

The range for color brightness difference is 125. The range for color difference is 500.

Increasing color difference will help with some visual impairments, but it's generally contrast that is the main thing to consider. However, high contrast colors can sometime cause problems too, in particular for dyslexic readers. I believe this is why HP's old colour contrast tool used to specify 400 as the suggested range. In my opinion to get a balance, it's best not to maximize contrast but to aim somewhere around the 450 to 550 range.

Improve this answer
1
  • There's a great tool that generates color schemes that match these requirements: randoma11y.com
    – Alec Rust
    Commented Oct 15, 2016 at 13:22
2

The reference that Roger cites is 16 years old (April 2000). If you're working on accessibility, you should use WCAG 2.0 and criterion 1.4.3 as you noted in your original post (which, btw, I thought was fine for posting on stackoverflow since it was an accessibility programming question).

Your contrast ratio is 7.9 which meets the minimum 4.5. In fact, you meet the AAA criterion of 1.4.6 which requires a 7:1 min ratio.

So your colors are good with respect to accessibility.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.