WCAG 2.0 color contrast - How strict do you need to follow?

Question

I have some buttons with a purple background and I am trying to set the text color so it is in compliance of the WCAG 2.0 color contrast rules.

My issue is that I just don't understand how based on the rules, that black text is better on the purple than white. I have asked several people to get their opinion and everyone agrees, the white text is better, yet based on color contrast checkers the better ratio is with black text.

An example of the buttons I have are on this JSFiddle: http://jsfiddle.net/mq58jwfb/5/

How strict should I follow the WCAG? I know this is to allow better visiblity for those with vision problems, but if it makes it worse for the majority of users (although subjectively), should I still follow the WCAG despite what looks easier to read?

Answer 1

Short Answer

No real mystery here, the white text is better actual perceived contrast, and WCAG2 does not accurately reflect this. This is partly because WCAG2 contrast math is not perceptually uniform, is not sensitive to polarity (dark mode vs light mode), and does not help with color vision deficiencies.

Longer Answer

The deficiencies and issues with WCAG2 contrast are fairly well-known, especially in more recent years. Significant work has been done and continues to be done to develop replacement technologies. Even though this is an old question I am providing this update answer because this is a changing situation today.

In the case of the lavender on the JFiddle background: #8C82B9;, white text has about 70% more contrast than black text. The following image is a clinically accurate simulation of various forms of color vision deficiency, and also one of actual color blindness also known as achromatopsia in this case it is a simulation of blue cone monochromatism.

Simulation by Myndex CVD Sim

This shows that various color sensitive vision types see this simple graphic equally well. The very rare forms of actual color blindness (BCM 1/100,000 shown here) is co-morbid with photophobia and low vision, and generally require some level of AT.

Follow Accessible Road 🎶

As far as "do you have to follow WCAG2" or can you follow newer developing guidelines that are not yet official recommendations? The answer is it depends, depending on what your specific contractual or legal obligations are for your product & market, and that will somewhat dictate which contrast technology you need to follow.

The color scheme modes used also affects certain legal obligations—that is, if you have a light-mode following weekend too and there's a user selectable choice of other color schemes, other color and contrast methods can be used. This is important because WCAG2 cannot calculate for dark mode, while APCA can.

In the United States the ADA does not specify WCAG2, only that public accommodations be accessible. However government procurement must follow the US Access Board 508 rule, which generally uses WCAG2. It's important to know though that the 508 rule has a couple of important exceptions:

• commercial availability (if procuring IT technology like an application and it doesn't meet 508/WCAG2, it can still be purchased, provided that a more accessible version is not commercially available)
• alternate facilitation (using an alternate technology to provide contrast guidance can be used, so long as accessibility is enhanced.)

This second rule, alternate facilitation, allows for APCA to be used as an alternate facilitation, as APCA is more accurate and better promotes actual accessibility.

The regulations are different in Europe and some other parts of the world, so it's important to know what your actual requirements are for your market. If you do have a specific requirement, there is an interim guideline called BridgePCA, which provides backwards compatibility to WCAG2, at the expense of flexibility. For instance with this lavender, BridgePCA rejects the black text and allows white text, so long as the text is large.

Disclaimer: while I am an invited expert of W3C, opinions expressed are my own and not necessarily those of the W3C. Also, I am the creator of APCA and BridgePCA, being developed to replace the older WCAG2.

Answer 2

Well, either you follow the rules or you don't. You have to choose if the trade off of "nice look" vs "accessible" is of value for you. Personally, I always think objective data is usually better than subjectivity, so I try to go with what objective data says. But again: it's a decision you have to make.

As for your specific color choice, while it looks reasonable for regular vision, it becomes more difficult to read for people with achromatopsia, tritanopia or Tritanomaly

If you want to abide to these rules, you could work with shades, adding black to your original light purple. For example, if you add 20% black, your color becomes #766d9b, which makes your color combination accessible, makes your choice fully color compliant, and keeps it within the range of your original hue choice

Answer 3

My issue is that I just don't understand how based on the rules, that black text is better on the purple than white.

This is to do with the varying types of colour blindness and if people with these can read it.

I have asked several people to get their opinion and everyone agrees, the white text is better, yet based on color contrast checkers the better ratio is with black text.

Simply asking people around the office (assuming thats what you did) for their opinion isn't good enough, if it is a requirement to use the accessibility guidelines then you need to ask people that need them. Asking people for their subjective opinion on the colour combination is just asking a fraction of the user base. Likely not the people that actually need these guidelines.

How strict should I follow the WCAG?

This depends on whether you want it to be compliant. As mentioned by Devin, you either follow them or you don't. If you want it to be compliant then you need to follow them, if not, it will not be compliant. There isn't an in-between for this. It either passes or fails compliance with the guidelines.

I know this is to allow better visiblity for those with vision problems, but if it makes it worse for the majority of users (although subjectively),

What was this based on? How they thought it looked or readability (both subjective until tested)? or both?

should I still follow the WCAG despite what looks easier to read?

If you want it to be compliant, then yes, you need to follow them. If you don't like how it looks then change it, use different colour combinations and/or text sizes that the brand allows. For example, with larger text that colour combination (white on purple) passes WCAG AA.

Answer 4

"How strict should I follow the WCAG?"

1 You do not have to follow it at all if you do not want to, depending on what industry you are in, as there are discrimination laws though those are usually applied to Government and Public sector.

2 Depends on what level of conformance you want to reach A, AA or AAA so it's not black and white, as you follow or you don't.

Opinions should not matter as these would change not only from person to person but could change depending on what mood the person is in or the phase of the moon. To me white text looks fuzzy and the black one looks clear, subjective and probably my eye sight.

Play around with WebAIM Color Contrast Checker, see what works and make a decision.

Answer 5

There are a couple of things to note here,

1. You can use a tool like Color Oracle to view how a person with colour blindness would see your UI.
2. If you increase the font size to 18pt (or 14pt bold), your current contrast ratio would be enough to meet the WCAG 2.0 standard.