Color Legibility Analyzer

Color legibility analyzer for WCAG contrast and APCA

The color legibility analyzer tests whether a text color is readable on a background at the exact font size and weight you plan to use. It reports the WCAG 2 contrast ratio, the APCA Lc score, a live text preview and a type scale check in one place. It is free, runs in your browser and needs no signup.

How to use the color legibility analyzer

1. Pick a Text color and a Background color with the color pickers, or type a HEX code such as #1A202C into each field.
2. Move the Font size slider (8px to 72px) and choose a Font weight from Thin (100) to Black (900).
3. Choose a Font family (System UI, Georgia, Monospace, Arial, Times New Roman or Verdana) and edit the Sample text to match your real copy.
4. Read the large contrast number, the verdict and the WCAG AA, WCAG AAA and APCA badges.
5. If the pair fails WCAG AA, click one of the suggested fixes to apply a new text or background color.
6. Use Swap colors to test the reverse (light text on dark), then choose Copy CSS, Copy results or Share link.

Text legibility results you get in one report

The report combines two contrast methods with previews, so you judge readability from evidence instead of one number.

• Live preview: your sample text rendered with your colors, size, weight and font family, plus a note on whether WCAG treats that size as large or normal text.
• WCAG verdict for your size: the ratio is judged against 4.5:1 or 3:1 for AA, and 7:1 or 4.5:1 for AAA, depending on whether the text counts as large.
• APCA Lc score: a signed lightness contrast value. A negative value means light text on a dark background.
• Type scale check: seven rows from small print (12px) to display light (48px), each with a WCAG and an APCA verdict.
• APCA font size and weight lookup: the minimum pixel size for each of the nine weights at your current Lc value.
• Fix suggestions: when WCAG AA fails, the tool offers a new text color and a new background color that reach the target ratio while staying as close to your original as possible.

What is the difference between WCAG contrast and APCA Lc?

WCAG 2 uses one contrast ratio from 1:1 to 21:1 and applies a fixed pass mark. APCA (Advanced Perceptual Contrast Algorithm) returns an Lc value and ties the result to font size, weight and use case. APCA is a candidate for WCAG 3, which is still a W3C working draft.

That matters in practice. WCAG 2 treats dark-on-light and light-on-dark the same, while APCA scores them differently because people perceive them differently. WCAG 2 is the current standard that most legal and procurement requirements cite. Treat APCA as extra guidance, not as a replacement for the WCAG 2 pass or fail.

WCAG thresholds for normal and large text

Under WCAG 2.2, normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA, as set out in the W3C explanation of contrast minimum. Large text means at least 24px (18pt) regular, or at least 18.66px (14pt) bold.

The analyzer applies this split automatically. A 19px text at weight 700 is judged as large, while the same size at weight 400 is judged as normal text.

WCAG contrast example: gray text that is weak for body copy

Take #767676 text on a white #FFFFFF background at 16px and weight 400. The WCAG ratio is 4.54:1, so it passes AA for normal text but not AAA. The APCA score is Lc 71.6, which is below the Lc 75 minimum that APCA guidance gives for body text.

The lookup row shows the effect: at Lc 71.6 and weight 400, the minimum readable size is 19.5px. At weight 700 it drops to 14.5px. So the gray works for a bold 16px label, but regular 16px paragraphs would be better in a darker gray.

Compare that with #1A202C on white, the tool's default pair. It scores 16.31:1 and Lc 103.3, which passes every check at every size. Swap the colors and the APCA score becomes negative, with light text on a dark background.

Which APCA Lc level is enough for body text?

APCA guidance asks for Lc 75 or more for body text, with Lc 90 preferred for long reading. The analyzer translates your score into a plain-language use case, so you do not need to memorize the scale.

The font size lookup uses a reference typeface, so other fonts may need adjustment. Light weights need much larger sizes. A Thin (100) weight at Lc 60 needs about 72px.

How is the WCAG contrast ratio calculated?

The WCAG contrast ratio compares the relative luminance of two colors: (lighter + 0.05) divided by (darker + 0.05). Relative luminance is a weighted sum of the linearized red, green and blue values, as defined in the WCAG 2.2 relative luminance definition. Green carries the most weight and blue the least.

Black on white gives the maximum of 21:1, and identical colors give 1:1. The result depends only on the two colors, which is why WCAG 2 cannot tell a thin 12px line of text from a bold 24px headline. The size and weight rules in the analyzer fill that gap.

How font size, weight and family change text readability

Font size, weight and family change how readable a color pair feels, even when the contrast number stays the same. Thin strokes carry less ink, so they need more contrast or a larger size. Heavier weights stay legible at lower Lc values.

The type scale check shows this in seven rows: Small print, UI label, Body text, Large bold, Subheading, Heading and Display light. Each row shows a WCAG badge and an APCA badge. You can often see a pair pass for the heading rows and fail for the small print rows.

Try the same colors in Georgia, Verdana and Monospace. Wide, open typefaces such as Verdana usually read better at small sizes than narrow ones. The APCA lookup is based on a single reference font, so use the preview to judge your actual typeface.

Text legibility fixes and common mistakes

Most legibility failures come from a handful of repeat patterns. Check these before you ship.

• Testing at the wrong size: a pair can pass as 24px heading text and fail as 14px body text. Set the slider to your real size.
• Ignoring weight: light weights lose legibility faster than regular ones. Try 400 or 500 for small text.
• Relying on WCAG alone: a ratio just above 4.5:1 can still feel faint in paragraphs. Check the APCA row too.
• Forgetting dark mode: use Swap colors and re-test, because light-on-dark scores differently in APCA.
• Trusting rounded numbers: the displayed ratio is rounded down, so 4.499 never reads as 4.50. Pass or fail uses the exact value.

When a pair fails, change lightness first and keep the hue. The suggested fixes do this and show how far the new color moves from your original, so brand colors stay recognizable.

When should you use a text readability checker?

Use one whenever a color decision affects how people read, before the design is handed off or published.

• Designers: test body, caption and label styles against real backgrounds before building a type system.
• Developers: copy the finished text style as CSS with Copy CSS, which includes color, background, font family, size and weight.
• Accessibility reviewers: use Copy results to paste the ratio, the Lc score and a link into an audit note.
• Content teams: paste real copy into Sample text to see how it looks at your chosen size.

Contrast is only one part of readability. People with color vision deficiencies may perceive your pair differently, so also run it through a color blindness simulator.

Test more text and background contrast pairs

This analyzer is built for one text style at a time. For a quick pass or fail on any two colors, use the WCAG contrast checker. To test every pairing in a set, open the palette contrast grid, or run a palette accessibility audit.

Buttons, inputs and keyboard states have their own rules, so use the focus indicator checker for those. If you are still choosing colors, the color safe palette builder is a good next step.