Accessibility Guidelines
Text contrasts well over any background colours or images
Good contrast makes text more readable for everyone. For those with poor vision or some forms of colourblindness, good contrast can be the difference between being able to read content, or not.
For typical 10- or 12-point paragraph text like what you are reading right now, the minimum contrast ratio must be 4.5:1. That is, the foreground text is at least 4.5 times brighter than the background (or vice versa), technically referred to as luminosity. Larger text, like 18 point or larger, perhaps bolded, requires a luminosity contrast ratio of 3:1 or greater.
The highest contrast (i.e., black on white) is 21:1. Though the minimum contrast ratios mentioned above are sufficient to pass an accessibility review, they are minimums. Ideally, contrast ratios should be higher than the minimum where possible.
You may notice, however, that white text on a black background, though having the same contrast ratio as black on white, is more difficult to read for most users.
This is due to the eye’s reaction to the dark background that is reflecting less light, and white text that is reflecting more light, causing the light to scatter more than it would from black text.
When the text is light grey, it reflects less light, making it more readable than the same white text over the black background.
So, despite the contrast ratios being the same when dark and light foreground and background colours are switched, when choosing colours it is generally better to have darker text over a lighter background.
When images are used as a background, which may have a variety of darker and lighter colours throughout, it is important to ensure that the text over that background does not lose its contrast when the screen size or resolution changes and the text floats over a different part of the image. If images are being used as backgrounds, be sure to test contrast with different screen sizes and resolutions. If text loses its contrast when the screen size changes, an opaque background colour might be used behind the text, so the text always appears over the same background colour, regardless of where it might be positioned over the image in behind the opaque background.
Testing for colour contrast
Colour contrast is tested by comparing two colour hex codes (e.g #ffffff for white and #000000 for black). Some tools will also test RGB triplet values (e.g. 255, 145, 125). To find colour codes, you can right click on an element in a web page that you want the colour code for, then choose “Inspect” from the right-click context menu. In the panel that opens, scan through the styles panel to find the colour codes. You may need to click through elements in the HTML panel to bring up the text and background colours, which are often associated with different elements. Paste the codes into a contrast checker, like the one below from WebAIM.
Tools: WebAIM Contrast Checker
