Accessibility Tool
Check foreground and background colour contrast ratios against WCAG AA and AAA accessibility standards. Essential when choosing text and background colours for Canvas HTML Template sections, buttons, and cards.
Sample Heading Text
This is body text. The quick brown fox jumps over the lazy dog.
Small text example — 14px
Contrast Ratio
16.94:1
| Standard | Minimum Ratio | 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 |
WCAG (Web Content Accessibility Guidelines) defines the minimum contrast ratio between foreground text and its background that makes content readable for users with low vision or colour blindness. The contrast ratio is calculated using the relative luminance of both colours — a formula defined in the WCAG 2.1 specification.
There are two compliance levels: AA (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 mandate at least WCAG AA compliance.
When building Canvas HTML Template pages with Canvas Builder, text-on-background colour choices are critical — especially for hero sections, dark-background sections, button labels, and card text. Always run your colour combinations through this checker before finalising your design. The Canvas Builder default palette (#1A1D1F on white) achieves a 17:1 ratio, well above AAA.
Enter your text (foreground) colour in the first field — use the colour picker or type a hex value.
Enter your background colour in the second field.
The live preview updates instantly, showing how text will look at heading, body, and small sizes.
The WCAG table shows your pass/fail status for all four standards: AA Normal, AA Large, AAA Normal, AAA Large.
If you fail AA, check the accessibility suggestion for the quickest fix — usually switching to near-black or white.
Run every text/background colour pair in your design through this tool before publishing.
| Level | Text size | Min ratio | When it applies |
|---|---|---|---|
| AA | Normal text | 4.5:1 | Body copy, labels, captions under 18pt (non-bold) or 14pt (bold) |
| AA | Large text | 3:1 | Headings 18pt+, or 14pt bold and above |
| AAA | Normal text | 7:1 | Enhanced — recommended for body text in critical interfaces |
| AAA | Large text | 4.5:1 | Enhanced — recommended for large headings in critical interfaces |
| AA | UI components | 3:1 | Icons, input borders, focus indicators, graphical elements |
| — | Decorative | None | Purely decorative images or text have no contrast requirement |
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 — a higher ratio means more readable text. WCAG 2.1 defines minimum contrast ratios that websites must meet to be considered accessible.
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt or 14pt bold and above). AA is the standard legal requirement in most jurisdictions and is the baseline most accessibility audits check against. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text — this is a higher standard, often recommended but not always required.
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 colour; it also needs an error icon or text label. Success/failure states in Canvas HTML Template components should always pair colour with a text label or icon. This is why the contrast checker also considers icon-based UI, not just text.
The most reliable fixes are: darken the text colour (move toward black), lighten the background (move toward white), or increase font weight (bold text can pass at a lower ratio since it's classified as 'large text' at 14pt bold). For coloured text on coloured backgrounds, increase the luminance difference between the two colours. The canvas palette's #1A1D1F on white achieves a 17:1 ratio — far exceeding both AA and AAA.
Canvas Builder generates accessible, production-ready Canvas HTML Template pages with WCAG-compliant colour choices built in.
Try Canvas Builder