Website Colour Contrast: 6 Checks for More Readable Text

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Check text and its background

   0:18

   The relevant pair is the foreground and the surface behind it.

   On-screen labels: Text colour; Background colour; Actual colour pair.

2. 2

   Step 2: Measure normal text

   0:30

   WCAG AA generally calls for at least 4.5 to 1 for normal text.

   On-screen labels: Contrast ratio; Normal text; 4.5 to 1 target.

3. 3

   Step 3: Treat large text carefully

   0:42

   Qualifying large text has a lower 3 to 1 minimum.

   On-screen labels: Defined large text; Size and weight; 3 to 1 minimum.

4. 4

   Step 4: Review text over images

   0:54

   A changing photograph can make parts of a sentence hard to read.

   On-screen labels: Light image areas; Dark image areas; Reliable text background.

5. 5

   Step 5: Check controls and states

   1:06

   Important boundaries and focus states need their own review.

   On-screen labels: Form boundaries; Active states; Focus indicators.

6. 6

   Step 6: Review after design changes

   1:18

   Contrast checks are one part of making a page accessible.

   On-screen labels: New brand colours; Changed backgrounds; Wider accessibility review.

Common questions

Go further