How to Preview Text With a Chosen Typeface in Colour Contrast Checker

Updated

Colour Contrast Checker (colourcontrast.cc) includes a Typeface selector with Google font options, and it renders an Example copy block in your selected foreground and background colours. Use it when you want to judge readability in a real typeface, not just read the numeric contrast ratio. The preview also separates Large Text (18pt/24px) from Normal Text (16px), so you can see how the same colour pair behaves at both sizes.

What the typeface preview does

The checker's core job is comparing two colours against WCAG standards. The typeface control adds a visual layer on top of that:

  • You pick a font from the Typeface dropdown (populated with Google fonts).
  • The Example copy area re-renders in that font using your current foreground and background colours.
  • The preview shows the same colour pair at two text sizes: Large Text – 18pt/24px and Normal Text – 16px.

The numeric result tells you pass or fail. The preview tells you whether the result actually looks readable in the font you plan to ship.

Step-by-step: preview a typeface

  1. Set your colours first. Enter or adjust the Foreground colour and Background colour. The page shows each as a hex value (for example #222222 foreground, #ffe66d background) alongside RGB and HSL readouts. You can also use Reverse colours to swap them.
  2. Open the Typeface selector. Choose a font from the Google font list. The Example copy updates to that typeface immediately.
  3. Read the Example copy block. Confirm the text is legible in the chosen font at both sizes shown.
  4. Cross-check the pass/fail labels. The results panel reports Pass AA Large, Pass AAA Large, Pass AA Normal, and Pass AAA Normal for the current pair.
  5. Save the combination if you want to keep it. Use Save colours to retain the pair, and Copy next to a hex value to put it on your clipboard.

Expected result: the Example copy renders in your chosen typeface and colours, and you can see at a glance whether the large and normal text sizes both hold up.

Why the two text sizes matter

WCAG treats large and normal text differently, and the checker reflects that with separate labels:

Preview size Spec shown What it represents
Large Text 18pt / 24px Headings and other large type
Normal Text 16px Body copy and smaller UI text

A colour pair can pass at large size and fail at normal size. The preview lets you see both at once, so you don't approve a palette based only on the heading treatment.

Judging readability beyond the ratio

A passing ratio is a threshold, not a guarantee of comfort. Things the preview helps you catch:

  • Thin or light fonts can look weaker at the same contrast ratio than a heavier weight.
  • Small text at 16px may read worse in a decorative Google font than in a plain one, even when the labels say Pass.
  • Colour pairs near the boundary can look fine in one typeface and strained in another.

Use the numeric labels to confirm compliance, then use the typeface preview to confirm the result is actually comfortable to read.

Common snags

  • Preview looks different from your site. The checker uses its own rendering; your site's font weight, letter spacing, and anti-aliasing will differ.
  • Only Google fonts are listed. If your project uses a self-hosted or system font, pick the closest match to approximate the look.
  • Colours not updating. Re-check that you edited the foreground or background field rather than only the typeface; the preview reflects the current colour pair.
  • Assuming a pass is enough. The labels cover WCAG thresholds — they don't account for font weight or rendering quirks, which is exactly what the preview is for.