Black or white text on a color

WCAG's contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker; black has 0, white has 1. Against black a color gives (L + 0.05) / 0.05, against white 1.05 / (L + 0.05). The two are equal at L = 0.179. Above it black text wins, below it white.

At that point both give 4.58:1, just over 4.5:1. So for normal text at level AA there is always an answer: no color fails with both. Level AAA is stricter, at 7:1, and there is a band in between: colors with a relative luminance between 0.10 and 0.30 cannot carry normal text at AAA in either black or white.

Of the twelve colors above, 7 take black text: tomato, orange, gold, yellowgreen, seagreen, steelblue, hotpink. The rest take white. Some of the results surprise people who judge by eye: bright reds and oranges are lighter than they look, so black often reads better on them than white, and a mid blue sits close to the switch. That is the reason to compute the ratio instead of guessing, and to check it again whenever a palette changes.

Two hues at the same apparent strength can need different text colors, because relative luminance weights green far more than red and red more than blue. Keeping a palette accessible explains why lightness, not hue, decides contrast.

Every swatch in Recolor prints its hex code in near-black or white, whichever has the higher contrast, and carries a small badge with a black and a white dot, each marked with a check or a cross for 4.5:1. The swatch menu spells the two ratios out. The same choice runs through the page: when a palette would push a page's text below the contrast it had, up to 4.5:1, the mapping gives lightness back, as Strength, neutral tint and overrides describes. Every page in the palette gallery has the same black and white table for its colors.

Text does not have to be black or white: a dark color from the palette on a light one, or the other way round, is fine when the pair reaches 4.5:1 (3:1 for large text, 18 point or 14 point bold). Near-black and near-white from the palette often look better than pure black and white. Buttons need two checks: their label against the button, and the button against the page at 3:1 when its edge is what shows it. Choosing the colors for those roles is covered in how many colors a website palette needs, and trying them on your own pages in test a palette on your own site.