Skip to content
Randozi
All wheelsTools

Black or White Text Picker

Enter a background color. The page computes the WCAG contrast ratio of black text and of white text on it, picks the higher one, shows both values with the AA result of each, and gives the CSS color line to copy.

Higher contrast on #777777

Black text

Black 4.6895:1 · White 4.4781:1

4.6895:1

Higher contrast. Normal text AA (4.5:1): reaches it. Large text AA (3:1): reaches it.

color: #000;

4.4781:1

Normal text AA (4.5:1): does not reach it. Large text AA (3:1): reaches it.

color: #fff;

The page compares pure black and pure white on one opaque sRGB background and picks the higher ratio. It does not declare either one acceptable: that depends on the text size, the level you aim at and the rest of the page. Not a certification of conformance.

How it works

  1. Enter the background color as a hex code, or pick it with the color picker.
  2. Compare the ratio of black text and of white text.
  3. Check the AA result under each option.
  4. Copy the CSS line of the option you keep.

What people use it for

  • Buttons and badges

    Choose the label color of a colored button when users can set the color.

  • Tags from user colors

    Pick black or white for each tag in a list whose colors come from a database.

  • Theming a design

    Check the middle shades of a color scale, where the choice is least obvious.

Questions

How is the choice made?
The page computes the ratio of black (luminance 0) and of white (luminance 1) on the background: (L + 0.05) ÷ 0.05 for black and 1.05 ÷ (L + 0.05) for white, with L from the sRGB formula. The option with the higher ratio is picked. The crossover is near L = 0.179.
What if both options fail?
In the mid tones both can stay under 4.5:1. The page shows each result as it is and does not call the pair conformant. Change the background, or use a different text color with the contrast checker.
Why is there no global pass?
Passing depends on the size and weight of the text and on the level you aim at. The page shows the AA result for normal text and for large text, option by option, and leaves the conclusion to you. It is not a certification of conformance.
Does it work with transparent colors?
No. It takes an opaque sRGB color of 3 or 6 hex digits. For a color with an opacity, use the transparent color contrast checker.