Accessibility tool
WCAG Contrast Checker
Check a text and background colour pair against the WCAG AA and AAA contrast standards. Use it when you choose colours for sections, buttons and cards in your Canvas HTML Template pages.
Sample heading text
This is body text. The quick brown fox jumps over the lazy dog.
Small text example at 14px
Contrast ratio
16.94:1
| Standard | Minimum | Result |
|---|---|---|
| WCAG AA, normal text | 4.5:1 | Pass |
| WCAG AA, large text | 3:1 | Pass |
| WCAG AAA, normal text | 7:1 | Pass |
| WCAG AAA, large text | 4.5:1 | Pass |
What is WCAG contrast accessibility?
WCAG (Web Content Accessibility Guidelines) defines the minimum contrast ratio between text and its background that keeps content readable for people with low vision or colour blindness. The ratio is calculated from the relative luminance of the two colours, using the formula in the WCAG 2.1 specification.
There are two compliance levels. AA (the minimum) requires 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold). AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Most accessibility audits, legal requirements and government standards ask for at least WCAG AA.
When you build Canvas HTML Template pages with Canvas Builder, text and background choices matter most in hero sections, dark sections, button labels and card text. Check each colour pair here before you finalise the design. For reference, near-black #1A1D1F on white has a ratio of about 16.9:1, well above AAA.
How to use this tool
- 1
Enter your text (foreground) colour in the first field: use the colour picker or type a hex value such as #1A1D1F or #fff.
- 2
Enter your background colour in the second field.
- 3
The live preview updates instantly and shows the colours at heading, body and small text sizes.
- 4
The results table shows pass or fail for all four levels: AA normal, AA large, AAA normal and AAA large.
- 5
If the pair fails AA, read the suggestion below the table. The quickest fix is usually near-black or white text.
- 6
Run every text and background pair in your design through the checker before you publish.
WCAG contrast requirements reference
| Level and text size | Min ratio | When it applies |
|---|---|---|
| AA normal text | 4.5:1 | Body copy, labels and captions under 18pt, or under 14pt bold |
| AA large text | 3:1 | Headings of 18pt and above, or 14pt bold and above |
| AAA normal text | 7:1 | Enhanced level, recommended for body text in critical interfaces |
| AAA large text | 4.5:1 | Enhanced level, recommended for large headings in critical interfaces |
| AA ui components | 3:1 | Icons, input borders, focus indicators and other graphical elements |
| No level decorative | None | Purely decorative images or text have no contrast requirement |
Frequently asked questions
What is WCAG and why does contrast matter?
WCAG stands for Web Content Accessibility Guidelines, published by the W3C. These guidelines define how accessible web content should be for users with disabilities, including those with low vision or colour blindness. Contrast ratio measures the brightness difference between foreground text and its background, and a higher ratio means more readable text. WCAG 2.1 defines minimum contrast ratios that websites must meet to be considered accessible.
What contrast ratio passes WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt, or under 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). AA is the level most accessibility laws and audits check against. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. It is a higher standard that is often recommended but not always required.
Does colour alone communicate meaning?
No. WCAG 1.4.1 states that colour must not be the only means of conveying information. For example, a form error state should not rely only on red; it also needs an error icon or a text label. Success and failure states in any interface should pair colour with a text label or an icon, which is why this checker shows Pass and Fail as words and icons, not just green and red.
How do I fix low contrast in my design?
The most reliable fixes are to darken the text colour (move it toward black), lighten the background (move it toward white), or make the text large or bold enough to count as large text, which only needs 3:1 at AA. For coloured text on a coloured background, increase the difference in lightness between the two colours. As a reference point, near-black #1A1D1F on white has a ratio of about 16.9:1, far above both AA and AAA.
Stop tweaking snippets. Build the whole site
This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.