WEBVTT

00:00:00.000 --> 00:00:06.000
Does your website text stand out from its background?

00:00:06.000 --> 00:00:13.000
A contrast check measures the actual colour pair.

00:00:13.000 --> 00:00:18.000
Make the words easier to read.
6 practical contrast checks.

00:00:18.000 --> 00:00:30.000
Check text and its background
The relevant pair is the foreground and the surface behind it.
Text colour · Background colour · Actual colour pair

00:00:30.000 --> 00:00:42.000
Measure normal text
WCAG AA generally calls for at least 4.5 to 1 for normal text.
Contrast ratio · Normal text · 4.5 to 1 target

00:00:42.000 --> 00:00:54.000
Treat large text carefully
Qualifying large text has a lower 3 to 1 minimum.
Defined large text · Size and weight · 3 to 1 minimum

00:00:54.000 --> 00:01:06.000
Review text over images
A changing photograph can make parts of a sentence hard to read.
Light image areas · Dark image areas · Reliable text background

00:01:06.000 --> 00:01:18.000
Check controls and states
Important boundaries and focus states need their own review.
Form boundaries · Active states · Focus indicators

00:01:18.000 --> 00:01:30.000
Review after design changes
Contrast checks are one part of making a page accessible.
New brand colours · Changed backgrounds · Wider accessibility review

00:01:30.000 --> 00:01:39.000
Your checklist
Check text and its background · Measure normal text · Treat large text carefully · Review text over images · Check controls and states · Review after design changes

00:01:39.000 --> 00:01:47.000
Measure the colours and check the real page.
jerseyweb.je