Tools / Detection & Optimization

Text Contrast Checker

Check a text and background color pair against WCAG AA and AAA contrast thresholds.

01

Online Tool

The quick brown fox jumps over the lazy dog.

16.47:1

Contrast ratio · normal text thresholds

WCAG AA: Pass

WCAG AAA: Pass

This checks text-to-background contrast only. It does not measure font size hierarchy, images of text, focus indicators, or other WCAG criteria.

02

Tool Working Principle

The checker linearizes sRGB color channels, calculates relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It evaluates the selected text-size threshold only; it is not a full accessibility audit.

03

Step-by-Step Usage Tutorial

  1. 1Choose the text and background colors.
  2. 2Select the large-text threshold only when the text meets the stated size or bold criteria.
  3. 3Review the ratio and AA/AAA results, then adjust colors if needed.
04

Frequently Asked Questions

Do I need an account to use Text Contrast Checker?+

No. Every tool on TypeTempo runs fully in the browser with no account, email, or API key.

Is my input text stored anywhere?+

Tool calculations use the text in your browser, and the app does not send that input to the TypeTempo application server. A preview may still request font files or other assets from an external provider; those requests do not include the text you entered.

Can I use the output commercially?+

You can use generated text and CSS in personal or commercial work. If a result depends on a named typeface or third-party asset, check that family's or asset's licence before using or distributing its files.

Which browsers are supported?+

The tools are designed for modern desktop and mobile browsers. Font rendering and individual CSS or Unicode features can vary, so check the specific result in the browsers and devices you support.

What counts as large text here?+

The large-text option uses the WCAG contrast thresholds for text at least 24 CSS pixels regular or about 18.66 CSS pixels bold. Confirm the actual rendered size and weight before relying on that result.

05

Related Tools