WCAG AA requires 4.5:1 for normal text and 3:1 for large text — AAA requires 7:1 and 4.5:1 respectively.

Upgrade to Starter+ to get the closest AA-compliant color suggestion when your pair fails?

Upgrade to Starter+ to get the closest AA-compliant color suggestion when your pair fails.

Test your colors at their actual usage sizes — a pair that passes for headings may fail for small body text?

Test your colors at their actual usage sizes — a pair that passes for headings may fail for small body text.

Check color contrast ratios against WCAG 2.1 AA/AAA guidelines with live preview, auto-fix suggestions, and CSS export

Check color contrast ratios against WCAG 2.1 AA and AAA guidelines with live preview, auto-fix suggestions, and CSS export — all in your browser.

1Enter or pick a foreground (text) color and a background color.
2View the contrast ratio and WCAG pass/fail results for AA and AAA levels.
3Check the live text previews at different sizes: normal text, large headings, badges, buttons, and captions.
4Use 'Swap' to reverse foreground and background, or 'Random pair' for inspiration.
5Copy the CSS variables for the accessible color pair.

WCAG AA requires 4.5:1 for normal text and 3:1 for large text — AAA requires 7:1 and 4.5:1 respectively.
Upgrade to Starter+ to get the closest AA-compliant color suggestion when your pair fails.
Test your colors at their actual usage sizes — a pair that passes for headings may fail for small body text.

Free: contrast checking and preview. Starter+: auto-fix color suggestions and accessible pairs.

OneKitTools TeamUpdated 2.21.4