Colours

Colour contrast

Make sure that the contrast ratio of text and interactive elements on your site meets the requirements of WCAG 2.1 as paraphrased in the following sections. The ideal contrast range to meet all requirements is 7:1 - 15:1. Higher contrast ratios can be triggering for some people.

1.4.3 Contrast (Minimum) (AA)

Text (including images of text) has a contrast ratio of at least 4.5:1 for 'regular' text and at least 3:1 for large text (at least 18pt / 24px, or bold and at least 14pt / 18.5px), unless the text is purely decorative.

1.4.6 Contrast (Enhanced) (AAA)

Text (including images of text) has a contrast ratio of at least 7:1 for 'regular' text and at least 4.5:1 for large text (at least 18pt / 24px, or bold and at least 14pt / 18.5px), unless the text is purely decorative.

1.4.11 Non-text Contrast (AA)

The visual presentation of UI components (their states - including focus indication - and boundaries) and graphical objects has a contrast ratio of at least 3:1 against adjacent colour(s).

Tools for checking colour contrast

Choose whichever you prefer from the following list:

• Accessible Colors
• Color Contrast Analyser Download
• Contrast Ratio
• Link Contrast Checker
• Who Can Use
• Text on background image a11y check