Color contrast checker for live pages

Select any part of a page and Screen Ruler lists every piece of text and every icon inside it that fails WCAG contrast, with the actual ratio and the one it needs.

What it checks

Most contrast checkers ask you to paste two colors. Screen Ruler works the other way round: you pick a part of the page, and it finds the color pairs for you. It checks two WCAG 2.1 success criteria:

• 1.4.3 Contrast (Minimum) for text. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large or bold text needs 3:1 for AA and 4.5:1 for AAA. Screen Ruler works out which applies from the element's font size and weight.
• 1.4.11 Non-text Contrast for SVG icons, which need 3:1 against their background.

Each problem appears as a card in the side panel with the element's selector, a message such as Text has insufficient contrast ratio of 3.2:1 (requires 4.5:1 for normal text), and a recommendation for the ratio to aim for. Failures of AA are marked as warnings. Text that passes AA but misses AAA is listed as information, so you can decide how far to go.

How to check contrast on a page

1. Open the page you want to audit.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
3. Click an element to select it. Pick a large container, such as a section or the main content area, to check everything inside it at once. Press Alt + Shift + Up to step out to the parent element.
4. In the side panel's Element tab, open the Issues section. Click an issue to scroll the page to that element and highlight it.

When the same failure repeats, for example every link in a footer, the issues are grouped into one card with a count. Use the arrows on the card to step through each instance on the page.

With the Floating Inspector on, hovering any text also shows a contrast row with a preview, the ratio and an AA or AAA badge, which is handy for spot checks.

How the ratio is calculated

The numbers come from the WCAG relative luminance formula with sRGB gamma correction, and the standard (L1 + 0.05) / (L2 + 0.05) ratio, so they match what you would calculate by hand. The harder part is knowing which colors to compare, and that is where Screen Ruler does the work:

• Real backgrounds. When text has no background of its own, Screen Ruler looks at what is actually rendered behind it, layer by layer, including backgrounds drawn by ::before and ::after.
• Transparency. Semi-transparent text and backgrounds are blended with the layers beneath them, and the element's opacity is applied, before the ratio is worked out.
• Off-screen content. Issues further down the page are checked again when they scroll into view, so backgrounds that depend on position get the right ratio.
• Less noise. Disabled controls are skipped, and multi-colored icons are left out because 1.4.11 applies to single-color graphics.
• Components. Text inside open shadow roots is checked like any other text.

Limits

When the surface behind text is a gradient or an image, there is no single background color to compare against. Screen Ruler reports no ratio in that case rather than a guessed one, so check those areas by eye or with the color picker. Contrast is also only one part of accessibility. Screen Ruler does not check keyboard access, focus order, ARIA, form labels or screen reader output, so use it alongside a full audit, not in place of one.

When it is useful

• Design QA. Catch light gray text and low contrast placeholder copy on the built page, not just in the design file.
• Checking a design system. Select a component library page and find every token pairing that falls short.
• Before a release. Run through key templates and fix AA failures before they ship.
• Reviewing someone else's site. Audit a client or competitor page with no setup and no account.

Accessibility issue detection is free in Screen Ruler, with no time limit.

Common questions

What contrast ratio does WCAG require?

For WCAG AA, normal text needs at least 4.5:1 and large or bold text needs 3:1. For AAA, those rise to 7:1 and 4.5:1. User interface graphics such as icons need 3:1 under success criterion 1.4.11.

How is this different from the contrast check in Chrome DevTools?

DevTools shows the ratio for one element at a time in the color picker. Screen Ruler checks every text node and icon inside whatever you select, lists the failures together, groups repeats and highlights each one on the page, so you can audit a whole section in one pass.

Does it handle transparent colors?

Yes. Semi-transparent text and backgrounds are blended with the layers behind them, and the element's opacity is applied, before the ratio is calculated. When the background is a gradient or an image, no ratio is reported rather than a guess.

Is the contrast checker free?

Yes. Accessibility issue detection is part of Screen Ruler's free features and has no time limit.