4

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?

|improve this question|||||
  • In order to best answer this question, could you provide any details on which standard you need/want to be compliant to? There are A, AA and AAA and they all have different requirements. – Ainhoa Ostolaza Aug 17 '18 at 1:41
7

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

|improve this answer|||||
4

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.

|improve this answer|||||
  • Thanks. In my case, both myself and several I have asked said it was more readable (vs looking good) when white, and most said especially if your older with worse eye sight. I showed them the differences and asked which was more readable without further clarification and that's the responses I got. – BlueCaret Aug 16 '18 at 14:40
  • 1
    Good start, but you need to be taking into account the users that made the website meeting the WCAG guidelines a requirement. Age, colour blindness another (imagine the two combined even) those are two among a whole host of things that it covers. WCAG doesnt just cover poor eyesight alone. There is alot more to it than that. – UIO Aug 16 '18 at 14:46
3

"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.

|improve this answer|||||
  • 1
    Agreed. You should ask this question of the people in your organization who decided to follow WCAG. – Ken Mohnkern Aug 17 '18 at 12:14
1

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.
|improve this answer|||||
  • Thanks for that tool, been looking for something like that, awesome! – BlueCaret Aug 16 '18 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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