Contrast Checker calculates the WCAG 2.1 contrast ratio between two colors and grades them against AA/AAA thresholds for both normal and large text. Live preview shows text rendered in the chosen colors, and a "pick page background" button samples the current page.
Accessibility is increasingly required — WCAG conformance is a legal requirement in many jurisdictions, and even where it's not, poor contrast pushes away users. Contrast Checker tells you instantly whether any two colors meet WCAG standards. Pick a foreground and background via color picker or paste hex values; the tool computes the contrast ratio using the official WCAG luminance formula and grades it against four thresholds: AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), and AAA large (≥4.5:1). Each threshold shows a clear Pass/Fail badge. A live preview renders large and normal text in the chosen colors so you can see the actual visual impact. A convenience button samples the current page's body background — useful when checking whether a color combination on a real site passes. Everything runs locally in your browser, no uploads.
Uses the official WCAG luminance formula to compute contrast ratio. Result is exact and matches every compliant accessibility checker.
Pass/fail for AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4.5:1) — all shown as a grid.
Renders actual large and normal text in your chosen colors so you see the visual impact alongside the numeric ratio.
One-click samples the current page's computed body background color — useful for testing real-world combinations.
Type a hex value or use the native color picker. Values sync bidirectionally as you edit either.
One-click swap flips foreground and background — useful when checking inverted themes or hover states.
Before finalizing a color palette, check every text color against its background to ensure WCAG AA compliance — avoids rework later.
Use "pick page background" on a live site, then paste the actual text color — find a11y violations in minutes without opening Lighthouse.
When a brand picks a color that might fail a11y, use the checker to find the nearest compliant variant (darker/lighter shade).
Verify that hover/active/disabled state colors still meet contrast requirements, not just the default.
Dark themes often fail contrast for grey-on-grey text. Check your darkest greys against your darkest backgrounds to catch these.
Click the Contrast icon in the DevSuite Pro dock. A panel opens with foreground and background color fields.
Use the color picker or paste a hex value for each. Live preview updates as you change colors.
The big number (e.g. 4.8:1) is the contrast ratio. Higher is better. 3 is the bare minimum; 4.5 is target for normal text.
Pass/fail badges for AA and AAA, normal and large text sizes, show at a glance what your combination qualifies for.
If failing, tweak colors. Darken foreground or lighten background (or vice versa) until the target tier shows Pass.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
