Writing on color contrast
Every ratio in these articles is computed by the same engine that runs the scanner, at the moment the page renders. None of them is typed by hand, so none of them can be a typo.
- 4 minpalettes, design-systems, testing
Eight brand colors make twenty-eight pairs, and you have checked three
Palettes are approved one color at a time and used two at a time. The combinations grow faster than anyone checks, and the failures hide in the ones nobody tried.
- 5 minpalettes, oklch, design-systems
One brand color is not enough, and tinting it does not help
A single brand color cannot be a surface, a link and a tint at once. And the usual way of generating the missing shades is what makes them unusable.
- 4 minwcag, focus, components
The parts of your interface that need 3:1, and the parts that need nothing
WCAG 1.4.11 asks for 3:1 on controls, borders and meaningful graphics. It also exempts several things outright, and that is where the wasted work happens.
- 4 mincolor-blindness, wcag, palettes
Two colors can pass contrast and still be the same color
Contrast is measured against the background. Whether two colors are distinguishable from each other is a different rule, and the one that catches red and green.
- 3 minWCAG, typography, contrast
Your 20px heading is not large text
WCAG's large-text relief starts at 24px, or 18.66px at weight 700. Everything below that needs the full 4.5:1, and the gap is where most hand-checked palettes fail.
- 3 minbrand, buttons, contrast
White text on your brand color almost certainly fails
Most brand colors are too light to carry white text at 4.5:1. The fix is usually dark text on the brand color, not a different brand color.
- 3 mintooling, contrast, testing
Why two contrast checkers give you different answers
The ratio is fixed arithmetic, so disagreements are never about the maths. They are about which two colors the tool thinks it is measuring.