One of the most common issues we run into making websites accessible is contrast -- making sure the difference between the color and brightness of the text against the background is enough that it's clearly readable.
Blue text on a dark background can be very difficult to read -- but it's not just brightness. Red-green color-blindness affects around 8% of males around the world. Take a screen out into bright sunlight and try to read text that's similar brightness to its background, and you can start to understand that contrast issues affect everyone.
The standards
There are 3 related WCAG standards at play here:
When we're checking for these, we're using tools to tell us the ratio of the color contrast between the background and the foreground. For larger, bolder text, this ratio needs to be at least 3:1, and for smaller body text, at least 4.5:1. Most non-text elements, such as checkboxes, radio buttons, form elements, need a minimum of a 3:1 contrast ratio. And if colors are used for any elements, there must be other ways of distinguishing these elements. For example, a required field can be highlighted in red, but should also have an icon or symbol to indicate that it is required.
Where low-contrast is ok
There are 4 kinds of text considered "Incidental", where the text contrast is not required to meet these ratios:
- Inactive form elements - such as buttons that cannot be clicked
- Pure decoration - text that is not important, such as books/magazines in a photo
- Invisible text - hidden links, such as a "skip link" that only becomes visible under certain conditions
- Parts of a picture that have
Add new comment