Accessibility<\/h3>\n
In our field,\u00a0accessibility<\/strong>\u00a0is the practice of making websites and applications usable by\u00a0as many people as possible<\/strong>. We tend to think it only concerns people with disabilities, which it does, by definition, but it benefits plenty of other people too, depending on the context.<\/p>\n So:\u00a0user experience<\/strong>\u00a0aims to satisfy a precise group of people, and\u00a0accessibility<\/strong>\u00a0aims to include as many people as possible in a shared, decent experience. The two are not mutually exclusive.<\/p>\n <\/p>\n This blog post is a reply to the eponymous article<\/a>.<\/p>\n First, thanks to Anthony for surfacing beliefs that really do circulate in the design community. I discovered a few of them by reading him.<\/p>\n My problem is less with what he says than with how he says it. The framing pushes you to distrust one of the best known accessibility guidelines \u2014\u00a0WCAG<\/a>\u00a0\u2014 on the grounds that it doesn’t match what users need.<\/p>\n The article walks you through visual examples, each with an \u201caccessible\u201d option and an \u201cinaccessible\u201d one, and argues that people with disabilities prefer the inaccessible one. The conclusion you are led towards is risky and false: that the inaccessible solution might be the better one.<\/p>\n I’d rather take a different route. Let’s analyse each example and look for a genuinely better answer. Along the way you’ll get a clearer picture of how color works, which tools exist, and how to actually test your hypotheses.<\/p>\n They aren’t. The name says it: WCAG are\u00a0guidelines<\/em>, meant to help designers and developers build better interfaces. As soon as you start working with color, both personal taste and real user needs will collide with your sense of beauty.<\/p>\n But designing is not about your preferences or your taste. It’s about usability and about meeting user needs. Most of the time, color isn’t essential to usability at all. Start with fifty shades of grey.<\/p>\n Some people I know go much further than I do and design in black and white. (Wink wink,\u00a0Inclusive-Components.design<\/a>\u00a0by\u00a0Heydon<\/a>.)<\/p>\n Back to the colorful stuff. When you design an accessible interface with color, two things don’t matter:<\/p>\n Let’s take Anthony’s own example.<\/p>\n I’ve kept both the light and the dark background here, because Anthony ran his poll on the dark image and then argued about contrast on a white page. Worth knowing:\u00a0context changes how you perceive and read color<\/strong>. That’s\u00a0a topic of its own<\/a>, and I come back to it\u00a0later in this post<\/a>. From here on I’ll study the buttons on a light background only, one example is enough to make the point.<\/p>\n Here is the contrast data. Tests use a 16px font size and a medium font weight, because both matter to the analysis:<\/p>\n According to the\u00a0source<\/a>\u00a0of the survey, respondents\u00a0preferred the white text<\/strong>.<\/p>\n And that’s where I have a problem.<\/strong> Roughly 5% of the world’s population is colorblind, far more if you include other visual impairments, and 29% of the people who answered the poll picked the accessible version. I won’t pretend those two numbers map onto each other. But some of the respondents may well be colorblind, and even those who aren’t chose the accessible version in fairly large numbers.<\/p>\n There’s a second problem: \u201cdo you prefer A or B?\u201d cannot give you the right answer. Ask instead \u201chow easily can you read A?\u201d and then, as a separate question, \u201chow easily can you read B?\u201d. And rather than a binary \u201ceasy \/ not easy\u201d, use a rating scale.<\/p>\n In Anthony’s case, I’d say neither option works. Why?<\/p>\n Partly because WCAG uses maths to measure something that is fundamentally about perception, which is a genuine problem. It’s even been logged as an\u00a0issue on the WCAG repository<\/a>.<\/p>\n On top of that, Anthony overlooks\u00a0brightness difference and color difference<\/strong>, which matter enormously in any contrast analysis. They cover a different facet of perception, related to high contrast sensitivity, sometimes called Irlen syndrome<\/a>. WCAG says \u201ccolor contrast\u201d, but what it actually measures is the luminance difference between two colors. Anyway.<\/p>\n Brightness is not contrast.<\/strong>\u00a0It’s about the perception of light. Which is why analysing contrast alone, in situations where brightness does the work, doesn’t really make sense.<\/p>\n Back to our two color pairs:<\/p>\n Both fall short. That’s why dark on blue still doesn’t create a real, perceivable difference when you put it in front of people, so they answer with their taste instead.<\/p>\n So yes, WCAG measures the wrong thing. But the proposed alternative isn’t right either. Let’s improve those buttons.<\/p>\n If people prefer white text, keep the white text and change the blue behind it. That’s how you improve both contrast and color differentiation.<\/p>\n I love playing with\u00a0Color.review<\/a>: it gives you the indicators you need to pick an accessible pair, and shows you what the result looks like.<\/p>\n After a bit of tuning, I landed on a blue that meets AA (the intermediate level of requirements) with far better brightness and color differences.<\/p>\n With that new background, the numbers land much closer to what WCAG asks for:<\/p>\n To check that this is a real improvement and not just my taste,\u00a0I ran my own questionnaire<\/a> (link is the result of the questionnaire instead of the Twitter post, since I left Twitter\/X)<\/em>\u00a0on readability, and asked respondents whether they were colorblind. The numbers are below.<\/p>\n No surprise: when you ask about each option separately, people answer about readability rather than taste. Here is what came out.<\/p>\n For every button I asked the same question: \u201cCan you easily read the text on this button?\u201d, with the same 1-to-5 scale. A rating of 1 means \u201cno, not easily\u201d and 5 means \u201cyes, easily\u201d. On the charts below, the horizontal axis is the rating and the vertical axis is the number of responses.<\/p>\n People are reasonably comfortable with this one, though plenty still rate it below 4\/5.<\/p>\n Very mixed feelings. This one doesn’t get us where we want to go.<\/p>\n Almost no debate here. I think we did well.<\/p>\n This one tried to solve the contrast problem with a text shadow while keeping the inaccessible colors. It didn’t work.<\/p>\n To compare the options, I arbitrarily treat \u201creadable enough\u201d as the share of people who rated a button 4 or 5.<\/p>\n The result is entirely about accessibility: counting only the 4 and 5 ratings, we produced a button that 89.5% of respondents find readable, and 90% of the colorblind ones. (With more voters the two figures would probably have converged.)<\/p>\n N.B.<\/strong>\u00a0These are most likely people who don’t use a screen reader to read content. There are many degrees of visual impairment, and my survey deliberately stayed focused on color rather than asking for more detail.<\/p>\n You will never find a solution that works for 100% of people. Your job as a designer is to include as many as you can, and when you’re not sure, hand control of the interface back to them.<\/p>\n When people think about color accessibility, they assume the design will end up ugly. I still don’t know where that idea comes from, and I’d genuinely like to.<\/p>\n As a designer, you already work inside constraints all the time:<\/p>\n Accessibility is just another constraint. Like the others, it should be a trigger for creativity, not a blocker.<\/p>\n Daryl Koopersmith<\/a>\u00a0and\u00a0Wilson Miner<\/a>\u00a0wrote a good post on\u00a0designing accessible color systems<\/a>. It’s a solid example of how to build an accessible color system and then make efficient components out of it.<\/p>\n PS. I’ve heard that Stripe isn’t great for screen reader users. Different topic. And baby steps beat no steps.<\/p>\n I said earlier that I tested the buttons on white, but showed you two backgrounds on purpose.<\/p>\n Context is what reveals how perceptual color really is, and how much your eyes and brain do the interpreting. The whole thing sits under the abbreviation\u00a0HVS<\/a>\u00a0\u2014 human visual system model.<\/p>\n Short version: on a light interface, with a blue button and white text, your eye barely has to adjust. Dark text on that same button forces a bigger adjustment, so it feels harder to read. Supposedly. It’s a little like walking from a bright room into a dark one, your eyes need a moment before the shapes appear. Perception and the brain are complicated.<\/p>\n I had never come across this one before, but for the record: most European public sector websites are required to meet AA.<\/p>\n [\u2026] in the EU Member States are obliged by law to ensure that the information they publish is subject to accessibility standards, in particular the Web Content Accessibility Guidelines (WCAG) AA standards. Patrick H. Lauke<\/a>\u00a0\u2014 self-described WCAG trash panda, and an expert in web standards and accessibility \u2014 explained it to me in deliberately simplified terms.<\/p>\n A, AA and AAA are separate levels of compliance, ordered by how many people a failure affects and how critical that failure is. Level A criteria affect a lot of people and are seriously detrimental when they fail. AAA affects a smaller share of the population, is usually less of a show-stopper and more of a surmountable but disproportionately annoying problem, and it generally demands more fundamental changes to design and layout. As he put it:<\/p>\n “AA<\/strong>\u00a0is generally accepted as the baseline.\u00a0AAA<\/strong>\u00a0goes above and beyond, to help people with more severe visual conditions.”<\/p><\/blockquote>\n So the myth is only right in a narrow sense: you need AAA if you want to claim AAA conformance and reach the widest possible audience.<\/p>\n The point of a minimum is to push people to make an effort for those who need better readability. If WCAG has three levels, it’s to encourage you to keep going and discover what accessibility buys you. Cover all the level A criteria and you’ve already done well. Next stop: AA \ud83d\ude0a<\/p>\n And if someone tells you AAA is\u00a0only for old people<\/a>, because they’re \u201cmostly\u201d the ones with 20\/80 vision, and for people who don’t use a screen reader, purely to excuse skipping it, then you’re not building anything inclusive.<\/p>\n Besides,\u00a0my source<\/a>\u00a0puts the number of people with impaired vision in the US in the millions. In 2017: 3,894,406 people with vision below 20\/40, 1,483,703 below 20\/60, and 1,082,790 at 20\/200 or worse. Those figures cover people aged 45 and over.<\/p>\n There are two good reasons to aim for AA or AAA:<\/p>\n Use global studies to get a sense of direction, but don’t stop there:\u00a0do your own research<\/strong>, with your own users.<\/p>\n It depends.<\/p>\n In user tests I ran at Foyer<\/a>, the largest insurance company in Luxembourg, 100% of our testers behaved the same way: they read grey buttons as disabled, despite adequate contrast. I can’t share the recordings or the raw numbers, but I can give you the takeaway, affordance depends on a lot of contextual parameters.<\/p>\n Grey buttons are often used for secondary or cancel actions, deliberately made less eye-catching so people focus on what you want them to do.<\/p>\n You can get the same effect with a different combination of styles:<\/p>\n Your boundaries, a border, for instance, don’t need to meet a contrast ratio, as long as the text does.<\/p>\n If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast. Again: do your own research, and remember you’ll make mistakes. That’s fine.\u00a0Learn from them.<\/strong><\/p>\n That’s not a myth. It’s accessibility 101, arguably usability 101 too. This section leans on Use of Color<\/a>, but also takes cognitive disabilities into account.<\/p>\n You can’t treat color in isolation from the rest of accessibility and usability. Color accessibility is one small piece of the field, and it has to work alongside cognitive, motor and auditory considerations.<\/p>\n The requirement says:<\/p>\n \u201ccolor should not be used as the only visual means to convey information, indicate an action, or distinguish an element.\u201d<\/p><\/blockquote>\n It applies wherever different colors carry specific meaning for the user. In other words, if color differences carry information,\u00a0you need a second cue<\/strong>. That’s for visual impairment, and for cognitive impairment too.<\/p>\n Anthony writes that if you use lightness and darkness to convey information, you don’t need an extra cue as long as the contrast difference is high enough. What does that actually mean?<\/p>\n I tried several times to rephrase it and I can’t make it work: using color differentiation to carry meaning isn’t enough, full stop. Lightness and darkness are still color differences, and they still mean nothing on their own.<\/p>\n So yes, on a strict reading of WCAG, Anthony is technically right. Technically isn’t enough. It still leaves users confused.<\/p>\n Take the toggle tokens. With only a couple of items, you can’t tell what the initial state is, whether anything is activated at all. Same problem if every item starts grey: you have no idea what’s checked and what isn’t.<\/p>\n Add one more item and your brain starts building a pattern. Items that look alike share a state, so you can begin to guess. But why guess? Use the visual cues people already know, the ones that literally mean \u201cthis one is selected\u201d. Cognitive disabilities are part of accessibility too, and making people guess your intent goes badly often enough. More so for those users.<\/p>\n And voil\u00e0<\/span>. I mean \u2014 what does it cost?<\/p>\n Color is for decoration, mood, theming. It should support your message, not carry it alone. Color has no inherent meaning, whatever the many purely cultural interpretations you’ll find online say. Of course you’ll use red for errors, but the meaning lives in the words you write and in the indicator next to them, an icon, an image.<\/p>\n And even then, whether an icon is easy to interpret is another accessibility and usability question entirely.<\/p>\n To get a complete solution here, the code should also carry this meaning, but that’s another technical aspect I won’t dive in.<\/p>\n That was a lot of information, some of it contradicting what other experts say loudly and clearly. Here’s what to keep:<\/p>\n I’m around: comments, Bluesky<\/a>, LinkedIn<\/a> or WSocial<\/a>\u00a0are there for that \ud83d\ude42 I learned from these, along with the other resources linked throughout the post.<\/p>\n Color contrast is not a detail you can skip. If you design interfaces, it is part of the job. And if you are used to low contrast ratios, yes, you are probably afraid of losing some of the beauty of the interface you just crafted. That fear is legitimate. But accessibility is a constraint like […]<\/p>\n","protected":false},"author":4,"featured_media":6976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"1","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[776],"tags":[783,811,813,777],"coauthors":[597],"class_list":["post-6911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience","tag-accessibility","tag-colors","tag-contrast","tag-ux-en"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\tThe Myths of Color Contrast Accessibility<\/h2>\n
Myth 1: WCAG requirements are always optimal<\/h3>\n
The colors under test<\/h4>\n
\n
\n<\/strong>though we will still need your taste and your expertise to make the whole thing hold together;<\/li>\n
\n<\/strong>if the brand colors aren’t accessible, change them. Not the brand itself: pick a neighbouring, more contrasted shade<\/strong> for the interface. That’s where your taste earns its keep \ud83d\ude00
\nI know it isn’t always possible. An alternative stylesheet is another option, but for me it’s the last resort to keep both users and brand people happy.<\/li>\n<\/ul>\n![\"Two](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-contrast-guess@2x.png\")
<\/p>\n\n
\nWhite\u00a0#FFF<\/code>, blue\u00a0#57ACF9<\/code>
\nContrast ratio: 2.5:1 (minimum 4.5:1)<\/li>\n
\nDark\u00a0#2D2D2D<\/code>, blue\u00a0#57ACF9<\/code>.
\nContrast ratio: 5.6:1 (minimum 4.5:1)<\/li>\n<\/ul>\n\n
\nBrightness difference: 107 (minimum 125)
\nColor difference: 277 (minimum 500)<\/li>\n
\nBrightness difference: 103 (minimum 125)
\nColor difference: 353 (minimum 500)<\/li>\n<\/ul>\nHow do you fix color contrast?<\/h4>\n
![\"Color](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-review-accessibility.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/color-contrast-ok@2x.png\")
\n
\n<\/strong>White: #FFF, Blue: #57ACF9<\/strong>
\nContrast ratio: 2.5:1<\/strong> (minimum 4.5:1)
\nBrightness difference: 107<\/strong> (minimum 125)
\nColor difference: 277<\/strong> (minimum 500)<\/li>\n
\n<\/strong>White: #FFF, Blue: #0B77D8<\/strong>
\nContrast ratio: 4.5:1<\/strong> (minimum 4.5:1)
\nBrightness difference: 158<\/strong> (minimum 125)
\nColor difference: 419<\/strong> (minimum 500)<\/li>\n<\/ul>\nComparing the results<\/h4>\n
Proposal 1: Button with white text and blue light background<\/h5>\n
![\"Bar](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-1@2x.png\")
<\/p>\nProposal 2: Button with dark text and blue light background<\/h5>\n
![\"Bar](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-2@2x.png\")
<\/p>\nProposal 3: Button with white text and blue accessible background<\/h5>\n
![\"Bar](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-3@2x.png\")
<\/p>\nProposal 4: Button with white shadowed text and blue light background<\/h5>\n
![\"Bar](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-4@2x.png\")
<\/p>\n\n
\n
\n
![\"Pie](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/stats-color-blind-color-contrast@2x.png\")
<\/p>\nGoing further with color contrast<\/h3>\n
\n
On context: dark interface VS light interface<\/h3>\n
<\/p>\nMyth 2: Text must meet AAA, or it isn’t accessible<\/h2>\n
\n\u2014Source<\/a><\/p><\/blockquote>\n![\"Table](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/impairments-visual-blindness-US-stats.png\")
<\/p>\n\n
Myth 3: grey text and buttons are inaccessible and look disabled.<\/h2>\n
![\"Propositions](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-contrast-secondary-actions@2x.png\")
<\/p>\n
\n\u2014WCAG 1.4.3 – Contrast (Minimum)<\/a><\/p><\/blockquote>\nMyth 4: color alone isn’t enough to conver information<\/h2>\n
![\"Two](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens@2x.png\")
<\/p>\n![\"Three](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens-multiple@2x.png\")
<\/p>\n![\"Toggle](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens-checked@2x.png\")
<\/p>\nColor contrast takeaways<\/h2>\n
\n
\nThanks to\u00a0Patrick H. Lauke<\/a>\u00a0for his advice.<\/p>\nResources and external links<\/h2>\n
\n