Sufficient colour contrast is important to make it easier for people to recognise foreground from background. There are three WCAG 2.1 guidelines on accessible colour contrast and they are:
1.4.3: Contrast (Minimum) AA
- Text contrast ratio of at least 4.5:1
- Large text 3:1
- 18 point text or 14 point bold text is judged to be large enough
1.4.6: Contrast (Enhanced) AAA
- Contrast ratio of at least 7:1
- Large text 4.5:1
1.4.11: Non-text Contrast AA
- UI component and graphical objects to have 3:1 contrast against adjacent colours
Web AIM contrast checker is the tool I use all the time to check colour contrast. Recently I noticed that they have made it better by allowing the option to pick colour using colour picker. So now there are three ways to provide colour you want to test:
- Hexadecimal value
- RGB value
- Using colour picker
I created a new video to demonstrate this new feature. If you are not familiar with hexadecimal or RGB representation of colour, view the short video Find Digital Representation of Colour (RGB and Hexadecimal) first.
