Free tool, runs in your browser

Text contrast checker: will the headline read at thumb-scroll speed?

Pick a background color and a text color, and see the WCAG contrast ratio with pass or fail for normal and large text, plus a live 4:5 post preview at the size a phone feed shows it. Brand amber on white looks fine in a design file and fails on a phone; this catches that before you post.

Free, no account, nothing uploaded. Updated .

Contrast ratio

2.02:1

  • Large headline text, WCAG AA (needs 3:1)Fail
  • Body text, WCAG AA (needs 4.5:1)Fail
  • Body text, WCAG AAA (needs 7:1)Fail
  • Feed-safe headline (our rule) (needs 4.5:1)Fail

Feed-size preview

Left is roughly how big a post is in the feed; right is the profile grid.

Book your first class free

Book your first class free

Try Creobee's own pair: background #FCA311 with text #0B0500 passes AAA; the same amber with white text fails every level.

What contrast ratio means for a post

The WCAG contrast ratio compares the relative luminance of two colors on a scale from 1:1, identical, to 21:1, black on white. Web accessibility rules ask for 4.5:1 for body text and 3:1 for large text at AA, and 7:1 at AAA. A social graphic is viewed on a phone, outdoors, in a scrolling feed, for about a second, so the AA body threshold of 4.5:1 is the practical minimum even for headlines.

Brand colors are the usual failure. Bright amber, coral, mint and sky blue all sit in the middle of the luminance range, so white text on them lands around 2:1 and dark text lands around 10:1. This checker shows the ratio, the verdicts and a feed-size preview so the decision is made from what a follower will actually see.

Fixing a pair that fails

Keep the brand color and switch the text to near-black or white, whichever the checker rates higher. If the design needs light text on a mid-tone, darken the background by 20 to 30 percent or add a dark scrim behind the text. Over photographs, sample the lightest and darkest areas behind the text and check both.

To find your brand colors in the first place, run the logo through the color extractor; it returns each color with the text color that passes on it and a suggested pairing.

How to use it

  1. 01

    Enter your brand background color and headline color (hex or use the pickers).

  2. 02

    Read the ratio. 4.5 to 1 passes AA for body text; 3 to 1 passes for large headlines; 7 to 1 is AAA.

  3. 03

    Check the feed-size preview and swap the pair if the headline blurs into the background.

Questions

  • Aim for at least 4.5 to 1. Large headlines pass WCAG AA at 3 to 1, but feed images are viewed small and fast, so 4.5 to 1 is the practical floor and 7 to 1 is comfortable.

  • White on a bright amber like #FCA311 is about 2 to 1, far below the 4.5 to 1 threshold. Near-black text on amber is above 10 to 1, which is why dark text is the safe choice on a bright brand color.

  • Photos have many colors, so sample the darkest and lightest area behind your text and check both. Or add a scrim (a dark gradient) behind the text so the background becomes a predictable color.

  • No. The ratio is computed in your browser from the two colors you enter.

Tools that go with this one

Read next

All free tools