Colour Contrast
The visible presentation of text and images of text has a contrast ratio of at least 4.5:1 [...] (Level AA)
All text needs to be readable, and to be readable it needs to have sufficient contrast, else users will struggle to make out the text.
This will largely be a design issue, but it's important to be aware of the issue and to be able to test for it.
The exceptions to the explicit 4.5:1 contrast ratio are:
- Large Text (3:1 ratio required)
- Incidental Text (No requirement)
- Logotypes (No requirement)
Below is an example of a button with low contrast presented next to two options to improve the contrast.
The light green is too bright for the white text, so the text is hard to read. The dark green is much easier to read, or the text can be changed to black to make it even easier to read.
Ways to fix
As mentioned, the only ways to fix this is to change either the text colour, or the background colour.
This could be done on a case by case basis, as this isn't only an issue for isolated buttons.
It is also an issue for inline links, or other interactive elements like icons. In these cases, the background may not be adjustable and so the text colour has to change, and so to facilitate this the link or icon component could provide a prop to indicate whether the text should be light or dark.
const ContrastAwareLink = styled(Link)`
color: ${props => props.light ? 'white' : 'black'};
`;