Color on Color Text Checker
Palette pairs
Measured verdicts
You Might Also Need
The color on color text checker measures a whole palette at once instead of one pair at a time, giving every foreground and background combination a ratio and a set of AA and AAA verdicts. Each pair is also rendered, so a failure can be seen as well as measured.
What is Color on Color Text Checker?
The color on color text checker holds a working list of palette pairs, measures each one against the WCAG contrast thresholds and renders every pair as a sample line, so a pass or fail can be confirmed by eye as well as by number.
- The palette pairs list starts with four labelled rows: body text on a surface, a muted caption, a link on a tinted background and a badge label on its fill.
- Every row carries an editable label, a colour picker and a hex field for the foreground and the same pair again for the background.
- Rows can be added or removed, so a palette can be trimmed to the combinations that will actually ship.
- A single toggle switches the thresholds from normal text to large text, which is 24px or 18.66px at bold weight, and moves the bar from 4.5 to 1 down to 3 to 1.
- Each measured pair shows its ratio to two decimals alongside AA and AAA verdict badges, and the sample is rendered at 16px regular or 26px bold depending on the toggle.
The measurements come from the same relative-luminance engine as the single-pair checker, so a ratio here and a ratio there always agree. What changes is the shape of the work: instead of one pair and a verdict, the panel keeps a contrast failure count that tallies every pair below the current threshold, which turns a palette review into a number that can be driven to zero. The rendered sample is deliberately blunt, carrying the text "check it with your eyes too", because a ratio meeting 4.5 to 1 does not guarantee that a muted grey caption reads comfortably, and a ratio just under the line is not automatically unusable for large display text.
- The ratios describe flat colour pairs, so text over a gradient, a photograph, a translucent overlay or a hover tint needs its own row and its own measurement.
- The large text toggle is global rather than per pair, so a palette mixing body copy and display text has to be measured in two passes.
- The rendered sample uses two fixed sizes, 16px regular and 26px bold, rather than the real sizes from the design.
- Removing a row is immediate, with no undo, so a palette being trimmed should be rebuilt from the original rather than edited destructively.
- Nothing exports. The results are read from the screen and copied by hand into a review or a ticket.
Run the palette through it whenever a colour palette or a theme is being proposed, and treat the seeded rows as the checklist of combinations that most often go unmeasured: muted captions, link colours on tinted surfaces, and label text on a filled badge. When a single pair needs a closer look, the contrast text checker measures one pair with its luminance breakdown, the contrast pairing checker applies the same measurement to a pairing decision, and the font accessibility evaluator scores the resulting type specification against the full set of text criteria.
How to use Color on Color Text Checker
- Edit the seeded rows so the labels describe your palette, replacing each foreground and background with the real values from the design.
- Add a row for every combination you intend to ship, including muted captions, links on tinted surfaces and label text on filled elements.
- Set the large text toggle to match what you are measuring, then read the contrast failure count and the verdict badges row by row.
- Confirm the outcome in the rendered samples, since the eye catches a weak caption that a ratio on the line can hide.
When to use Color on Color Text Checker vs related tools
Use it when a palette is being signed off and the question is whether the whole set of combinations survives, rather than whether one pair is acceptable. It is also the fastest way to find the two or three combinations in a design system that were never measured, because the seeded rows are the ones that usually fail. For a single pair with its luminance arithmetic, the contrast text checker is the more precise instrument, and for the type side of the same review the WCAG font size checker and the font accessibility evaluator carry the thresholds that apply once the colours are settled.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.