Design and accessibility
Contrast Checker
Test any text and background pair against WCAG 2.2, see it on a live preview, and fix failing colours in one click.
Colours
Type a hex code, use the picker, or start from the Onground palette.
Enter a 3 or 6 digit hex code, for example #4F46E5.
Text from Onground palette
Background from Onground palette
Contrast ratio
Live preview
The stage uses your text and background colours. Change the sample to match your real copy.
Campaign report
Your audience is growing. Make sure they can read it.
Readers scan headings first, then body copy. Read the full report to see how each channel performed.
Small print at 13 px: results vary by channel, region and audience size.
Buttons, fields and controls
Borders, icons and focus rings need at least 3:1 against the background (WCAG 1.4.11).
Terms apply. Discount valid on new annual subscriptions only.
Fix suggestions
Closest colour that keeps the same hue and saturation.
Colour vision check
How this pair reads for people with common types of colour vision deficiency.
Onground palette matrix
Every text and background combination from the brand palette. Select a cell to load it above.
AAA is 7:1 or more, AA is 4.5:1 or more, Large means 3:1 or more (large text only), Fail is under 3:1.
Copy the result
Paste into your stylesheet or send it with your design feedback.
Saved pairs
Kept in this browser so you can compare options.
Ratios use the WCAG 2.2 relative luminance formula. Values are truncated, never rounded up, so a pair at 4.49:1 never shows as 4.5:1. Large text means 24 px or bigger, or 18.66 px or bigger in bold.