What is High Contrast Mode?

Test how your web content looks under different high contrast settings. Paste HTML or a URL screenshot to preview WCAG-compliant contrast modes, including Windows High Contrast, inverted colors, and custom contrast themes.

Pick from preset themes (Windows High Contrast, Inverted, Yellow on Black) or set your own foreground and background colors. The contrast ratio updates live and tells you which WCAG levels — AA, AAA, normal text, large text — your combo passes. The HTML you preview can be exported with the inline style applied.

How to use

1. Step 1 — Paste your HTML or plain text into the editor.
2. Step 2 — Select a contrast mode from the presets: Windows High Contrast (black/white), Inverted, Yellow on Black, or custom colors.
3. Step 3 — Review the live preview to check readability. Use the contrast ratio checker to verify WCAG AA/AAA compliance for text elements.

When to use

• Auditing a landing page for WCAG AA before shipping a marketing campaign.
• Checking that focus indicators and icon-only buttons survive Windows High Contrast.
• Picking a body-text color whose ratio against the brand background hits 4.5:1.

Result

A developer pastes their navigation bar HTML and switches to Windows High Contrast mode. They notice their icon-only buttons vanish against the black background, so they add visible text labels.

FAQ

What contrast ratio do I need for WCAG AA?

4.5:1 for normal body text and 3:1 for large text (18pt regular or 14pt bold and above). AAA tightens that to 7:1 and 4.5:1. The checker labels each combination with the levels it passes or fails.

Why do icon buttons disappear in Windows High Contrast?

Windows replaces colors with system tokens and ignores background images. Icons drawn as background-image or SVG with only fill colors become invisible. Use inline SVG with currentColor for stroke or add a visible text label.

Is yellow-on-black actually a real accessibility theme?

Yes. It's one of the original Windows High Contrast themes and is still widely used by people with low vision because the yellow stays vivid even with macular degeneration. Some users prefer it over pure white-on-black.

Does passing WCAG AA mean my page is accessible?

Contrast is one part of WCAG. Your page also needs keyboard navigation, semantic HTML, alt text, form labels, focus indicators, and reduced-motion respect. The ratio check tells you about color alone.

Why does my brand orange fail against a white background?

Saturated mid-tones (orange, yellow, lime) often have a contrast ratio under 3:1 on white because their luminance is too high. Darken the orange for body text, or reserve it for backgrounds and large headlines where 3:1 is enough.

Related Tools