How to Use a Color Contrast Checker
On this page
- What you'll learn
- What a color contrast checker does
- Using the Zepixo contrast grid step by step
- Reading the results
- WCAG ratios
- APCA Lc
- Fixing a failing pairing
- Move further apart on the scale
- Other fixes when you cannot move shades
- A pre-launch accessibility checklist
- Why checking the whole system beats spot checks
- Frequently asked questions
- What is a color contrast checker?
- How do I use the Zepixo contrast grid?
- What contrast ratio should body text pass?
- How do I fix a failing color pairing?
- Should I check WCAG or APCA?
- Does color alone count as accessible?
A color contrast checker is the fastest way to know whether your text is readable before real users ever see it. Instead of guessing whether a color passes, you get a clear number and a pass or fail verdict in seconds. This guide shows you how to use one properly, fix the fails it finds, and ship with confidence.
This is for designers and developers who want a repeatable process, not a one-off check. I will walk through using Zepixo's contrast grid step by step, reading the results under both WCAG and APCA, fixing failing pairings without wrecking your palette, and running a short checklist before launch. Let us turn contrast from a worry into a habit.
What you'll learn
- What a color contrast checker does and why a grid beats a single pair
- Step-by-step use of the Zepixo contrast grid
- How to read WCAG ratios and APCA Lc results
- How to fix a failing pairing the right way
- A quick pre-launch accessibility checklist
What a color contrast checker does
A contrast checker compares two colors, a foreground and a background, and tells you whether the difference in brightness is enough to read. It returns a WCAG ratio like 4.5:1, an APCA Lc value, or both, plus a pass or fail against the relevant threshold.
Simple checkers test one pair at a time, which is fine for a quick look. The problem is that a real product mixes many colors, and checking each pair by hand is slow and easy to skip. That is why a grid is far more powerful.
The Zepixo contrast grid is 11 by 11, because each color scale has 11 shades from 50 to 950. Every cell shows the contrast between one shade as text and another as background, so the whole system passes or fails in a single view.
Using the Zepixo contrast grid step by step
Here is the exact flow I use. It takes a few minutes and catches problems long before code review.
- Open the Zepixo Colors workspace and load your palette, or paste your brand hex to generate the scales.
- Scroll to the contrast grid. You will see an 11 by 11 matrix of cells, one per shade pairing.
- Pick the standard. Toggle the grid between WCAG ratio and APCA Lc using the switch above it.
- Read the colors. Green cells pass, yellow are borderline, and red fail at the chosen threshold.
- Find the pairings you actually use, like your body text on your page background, and confirm they sit in green.
- For any red pairing you need, adjust a shade and watch the grid update live until it clears.
- Preview on real UI to confirm the numbers hold up on buttons, cards, and inputs.
That is the whole loop. Load, toggle, scan, fix, preview. Once it is muscle memory, you will never ship a low-contrast button again. The accessibility docs cover each control in detail.
Reading the results
The grid is only useful if you can read it. The two standards report differently, so know what you are looking at.
WCAG ratios
Under WCAG, each cell shows a ratio. You are checking it against three numbers: 4.5:1 for normal body text, 3:1 for large text and UI elements, and 7:1 for the strict AAA level. A cell showing 8.3 passes body text easily, while 2.4 fails everything but possibly nothing.
APCA Lc
Under APCA, each cell shows an Lc value that can be positive or negative. The magnitude is what counts, so aim for an absolute Lc of 75 or more for body text and 60 or more for large text. The sign just tells you the polarity, with positive for dark-on-light and negative for light-on-dark.
| Cell color | WCAG meaning | APCA meaning |
|---|---|---|
| Green | Meets the target ratio | Clears the Lc threshold |
| Yellow | Large or UI only | Borderline, large only |
| Red | Fails for text | Below threshold |
Most teams scan WCAG first for compliance, then toggle to APCA to confirm real readability, especially in dark mode. Our guides on WCAG color contrast and APCA contrast explain each standard in depth.
Fixing a failing pairing
Finding a fail is the easy part. Fixing it without breaking your palette takes a little care. The good news is that most fails come from one mistake: pairing two shades that are too close in lightness.
Move further apart on the scale
The simplest fix is to swap one color for a shade further from the other on the same scale. If indigo 500 text fails on an indigo 300 background, push the text to indigo 800 or the background to indigo 50. You keep the hue and just widen the lightness gap.
Other fixes when you cannot move shades
Sometimes the colors are fixed, like a brand color on a brand color. Then you have other levers. You can darken or lighten one color slightly, increase the font size or weight to use the gentler large-text threshold, or add a subtle border or shadow to lift the element off its background.
| Problem | Fix |
|---|---|
| Mid text on mid background | Move one shade toward the opposite end |
| Body text just below 4.5:1 | Darken text or lighten background a step |
| Heading fails as body but passes large | Increase size or weight to qualify as large |
| Button label hard to read | Use white or near-black text on the fill |
Whatever you change, re-check it in the grid. A fix is not done until the cell turns green. Then preview on real components, since a passing number can still look thin on a tiny caption.
Ready to check your palette? Open the Zepixo Colors workspace, scan the 11 by 11 grid, and fix every red cell before you export your tokens.
A pre-launch accessibility checklist
Run this short list before you call a palette done. It catches the things a single contrast check misses.
- Body text clears 4.5:1 (or APCA Lc 75) on every background it appears on.
- Large text and headings clear 3:1 (or APCA Lc 60).
- Button labels pass against their fill color, not just the page.
- Input borders, focus rings, and meaningful icons clear 3:1.
- Status colors for success, warning, and error each pass with their text.
- Dark mode pairings are re-checked, not just inverted from light mode.
- No information is carried by color alone, so add an icon or label to status.
- Hover, focus, and disabled states are checked, not only the resting state.
If every box is ticked, your colors are genuinely accessible, not just lucky. This list pairs well with the broader process in our accessible color system guide. For the official rules behind it, see the WCAG contrast minimum page.
Why checking the whole system beats spot checks
It is tempting to check only the obvious pairing and move on. The trouble is that products reuse colors in unexpected places. A shade you thought was decorative shows up as text in an empty state, and suddenly it fails.
A grid removes that risk by testing every combination, including the ones you did not plan. You see the weak pairings before they reach a screen. That is the difference between hoping your colors are accessible and knowing they are. Export your verified palette as tokens from the export reference so the safe pairings carry into code.
Frequently asked questions
What is a color contrast checker?
A color contrast checker compares a text color and a background color and reports whether the difference in brightness is enough to read. It returns a WCAG ratio, an APCA Lc value, or both, with a pass or fail verdict. It removes the guesswork from choosing readable colors.
How do I use the Zepixo contrast grid?
Load your palette in the Colors workspace and scroll to the 11 by 11 grid. Toggle between WCAG ratio and APCA Lc, then read the cells, where green passes and red fails. Adjust any failing shade and watch the grid update live.
What contrast ratio should body text pass?
Normal body text should clear a WCAG ratio of 4.5:1 to meet level AA, or 7:1 for AAA. In APCA terms, aim for an absolute Lc of 75 or more. Large text has a gentler bar of 3:1, or Lc 60.
How do I fix a failing color pairing?
Most fails come from two shades too close in lightness, so move one toward the opposite end of the scale. If the colors are fixed, darken or lighten one slightly, or increase font size and weight to use the large-text threshold. Always re-check the fix in the grid.
Should I check WCAG or APCA?
Check both when you can. WCAG 2 is the current legal baseline, so pass it for compliance, then use APCA to confirm real readability, especially in dark mode. The Zepixo grid toggles between them with one click.
Does color alone count as accessible?
No. Even with good contrast, you should never use color as the only way to convey meaning, since color-blind users may miss it. Add an icon, label, or shape to status and other cues. Contrast and non-color cues together make a palette accessible.
Make the grid part of your routine and accessible color stops being a scramble at the end. Load, scan, fix, and ship knowing every pairing holds up.
Shaheer Malik
Founder of Zepixo — building the whole brand studio in one tab. Try Zepixo →