Check against the WCAG standards

Enter a foreground and background colour in RGB hexadecimal (#) format or choose a colour using our built–in colour picker to compare the contrast against one another; the preview panel will show your colours chosen in situ. You can also adjust the hue, saturation and lightness of each of your colours to get the correct colours that pass WCAG standards.

Web Content Accessibility Guidelines (WCAG)

WCAG provide a success criterion to provide enough contrast between text (or foregrounds) and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).

WCAG 2.2 level AA

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).

WCAG 2.2 Level AAA

WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

What size is text defined as?

Large text is defined as 14 point (typically ~18px) and bold or larger, or 18 point (typically 24px) or larger.

Need an expert pair of eyes?

We’re giving back to charities of any size who need assistance in making their website work harder for them. Our free Impact Optimiser is a bespoke document we provide to help your charity increase your online donations, with actionable insights you can implement all on your own.

Check the contrast ratio of your websites brand colours