Contrast is an important aspect when it comes to a11y as people that are colour blind may not see the content as the colour may look almost the same as the background.
How contrast is measured
Contrast is measured using WCAG Levels:
- AA: Requires a contrast ratio of at least 4.5:1 for small text and 3:1 for large text. This is more than enough for most applications so if you meet this criteria, you should be fine.
- AAA: Requires a contrast ratio of at least 7:1 for small text and 4.5:1 for large text.
General rules
Visual cues
When building the UI, do not depend on the colour to indicate successful and destructive/error states as colourblind people will not see the difference and for them both will look the same. Instead, make sure you have some kind of visual cues so that users know that the message is an error.
Don’t use hard contrast
You should avoid using hard contrast when building your websites and applications as it strains user’s eyes. When you want to have a dark background, use a slightly off black colour instead.