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 colours are accessible!
I know this may be obvious for you, and I apologise 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 colour. You can choose any colours 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).
Contrast ratio
So, starting with the most important — the colour contrast. It’s definition says is the difference in luminance between two adjacent or overlaid colours.
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:
Why Luminance is The Key Component Of Color
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.
Don’t worry, I know what you want next. To get the contrast of your colours, you can use this Javascript function, which receives two colours (in hex) and returns the respective contrast ratio. Magic.
Brightness
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-colour 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 this ready-to-use JS function, that also accepts hex colours, that returns a colour’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
.png){kind=small}
.png){kind=small}
