Lab 3
Color Lab
Contrast checkers test one pair at a time. A palette is dozens of pairs. See all of them at once, then find out what your terminal looks like to the people who use it.
Before you start
Most palettes are checked once, for body text on the main background, and declared accessible. Then the muted gray goes on the soft blue card, the success green becomes a border, the accent becomes a link on the navy footer, and nobody checks any of those. A palette is not one pair. It is every pair, and the matrix below shows them all.
The lab starts with this site's own palette. Some pairs fail. That is expected: a palette is meant to tell you which pairs you may use for what, not to pass every combination.
Palette matrix
Rows are text or foreground, columns are background. The band under each cell shows the result. Switch the measure to compare WCAG 2 ratios with APCA, and switch the view to see the palette as someone with a color vision deficiency would.
- AAA, or APCA Lc 75 and above
- AA text, or Lc 60 and above
- Large text and UI parts only, or Lc 45 and above
- Fail
Terminal Themes mode
A terminal theme with light and dark variants is two palettes. Paste each one. Every ANSI color is checked as text on that variant's background, because that is how a terminal uses it. The examples loaded here were drawn for this lab and show the usual pattern: the dark variant fails on dim colors, the light variant on bright ones.
What you just learned
- A palette is every pair. Text on card, icon on banner, border on surface. The matrix is the whole set, and the band tells you what each pair is allowed to be.
- WCAG 2 and APCA disagree, and that is informative. The ratio treats dark-on-light and light-on-dark the same. APCA does not, and it is stricter about thin, light text on dark. When they disagree, the pair is usually marginal. Pick a different one.
- Simulation changes the numbers, not just the swatches. Contrast is computed on the colors a person sees. A pair that passes in typical vision can fall apart under deuteranopia, and the matrix shows that directly.
- Light and dark are two palettes. The same sixteen ANSI colors cannot pass on both a light and a dark background. A theme that ships both has to be checked twice.
- Dim is where terminals fail. Bright black (color 8) is the usual comment color. It is also the one most likely to be unreadable. Check it first.
On the numbers
WCAG 2 contrast ratios are the normative check for WCAG 2.x conformance. APCA is the candidate method for WCAG 3 and is still changing; the lab uses the APCA-W3 0.1.9 constants and the commonly quoted body-text target of Lc 75. The color vision simulation uses the Machado, Oliveira and Fernandes matrices at full severity, which model dichromacy. Real color vision varies more than three matrices can capture, so treat the simulated view as a warning, not a verdict.
Built a palette that passes where it matters?
Send the tokens through the form. Good palettes and terminal themes go in the gallery with credit.
Submit to the gallery