Accessibility & ColorFront-End | 17th April 2019
During a recent project, I got really deep into Accessibility and colors. What does that mean? How does it work? What’s contrast ratio and color brightness? And what would I need to do, to guarantee accessibility?
These are some of the questions I had at the beginning, looked very hard for an answer on Wikipedia, and bring now the results back to you. Mostly, because I found the information was too spread, or behind a wall of general Accessibility information. And I could have used just a quick guide like this, with all the information condensed for me.
What you need to know
First of all, I want to make a very important disclaimer — All colors are accessible!
I know this may be obvious for you, and I apologize for that, but it’s a common misunderstanding.
What really matters for accessibility, is the brightness and contrast ratio, between an background and it’s foreground color. You can choose any colors you like for your projects. It’s the relation between them that you need to pay attention to.
Second, all guidelines and rules mentioned here, were defined by the Web Content Accessibility Guidelines 2.1 (WCAG 2.1), published by the World Wide Web Consortium (W3C).
So proud of this pun.
So, starting with the most important — the color contrast. It’s definition says is the difference in luminance between two adjacent or overlaid colors.
I know what you are, very secretly, thinking — “Hum, ok, but what’s that word, luminance?” Luminance is a measure of the intensity emitted from a surface per unit area in a given direction, that then reaches the eye.
Also, it’s unit of measure is candela per square meter (cd/m2)…! (do with this information what you will, I ain’t doing s@#!).
So, to wrap it up, the Color Contrast Ratio is the ratio (duh!) of the luminance of the brightest color (white) to that of the darkest color (black).
If you want to know more about these definitions, check these awesome sources:
With the basic definitions in mind, for accessibility you should aim for a contrast of at least 4.5 (AAA level). However, there are exceptions, depending on font-size and target WCAG level, which I summarized for you in the table below. As a general rule, the smallest the font-size, the greater the constrast you will need.
Now, there’s still other complementary element — Brightness. This is the perception of an object’s luminance. It’s how our eyes see the intensity of light. In other words, Brightness is perceived luminance.
For Accessibility, we want to check the level of Brightness, when we need to know the best font-color to use. Following the guidelines, we take the value 125 as reference. If the background level of Brightness is lower than that, you should use black font. If it’s higher, it should be white font.
Again, I’m making your life easier by giving you a ready-to-use JS function, that also accepts hex colors, that returns a color’s brightness.
See it in action!
And that’s it! If you want to see an example of all this working (or just use it as a tool), check this codepen example!
Originally written at Medium