Loading…
Loading…
Design tool
Check WCAG color contrast ratios.
Contrast Checker measures the WCAG contrast ratio between a foreground (text/icon) color and a background color. Pick two HEX colors, see a live sample, and get pass/fail guidance for WCAG 2.x AA and AAA normal and large text — free and private in your browser on ezToolFlow.
Readable text is an accessibility requirement and a conversion issue: low-contrast gray on gray fails users with low vision, older displays, and bright outdoor glare. WCAG 2.x defines contrast as a ratio of relative luminance between two solid colors. This tool implements the standard relative-luminance formula and reports the ratio as N:1 so you can compare against published thresholds.
WCAG thresholds (text): AA normal text needs at least 4.5:1; AA large text needs at least 3:1. AAA normal text needs at least 7:1; AAA large text needs at least 4.5:1. “Large text” generally means at least 18pt (or 14pt bold) — roughly 24px regular or 18.66px bold, depending on CSS font metrics. Non-text UI components and graphical objects under WCAG 2.1 Success Criterion 1.4.11 typically need 3:1 against adjacent colors (icons, input borders, focus indicators).
How to use the results: Pass/Fail lines for AA normal, AA large, and AAA normal map directly to those cutoffs. A ratio of 4.5:1 is the common minimum for body copy on marketing sites aiming for AA. Prefer AAA (7:1) for long-form reading, legal text, or audiences with higher visual needs. If a brand primary fails on white, darken the text color, lighten the background, or use the primary only for large headings/controls that meet the large-text or non-text rules.
Limits of any contrast checker: ratios assume opaque, flat colors. Semi-transparent text, gradients, photos, glassmorphism, and text-shadow change effective contrast — sample the actual rendered pixels or test worst-case solid approximations. Color blindness is separate from contrast (two colors can contrast well yet be hard to distinguish by hue alone). Always keep non-color cues (icons, underlines, patterns) for status and errors.
Workflow tip: pick brand colors in Color Picker, verify critical pairs here, then lock tokens (e.g. --text-primary on --surface). Re-check hover, disabled, and dark-mode pairs — disabled states often drop opacity and fail AA. Pair with CSS Gradient Generator carefully: ensure text sits on a stop that still passes, not only on the average of the gradient.
ezToolFlow is operated by Vishvajeet Shukla. For privacy details on browser tools, accounts, and AI features, read our Privacy Policy.
Set the text/icon color (foreground) and the surface color (background) with the color inputs. The sample “Aa” preview updates live.
The large N:1 figure is the WCAG contrast ratio from relative luminance. Higher is more contrast (black on white is 21:1).
Compare against AA normal (4.5:1), AA large (3:1), and AAA normal (7:1). Adjust either color until the levels you need pass, then copy the HEX values into your design tokens.
Confirm paragraph colors on page backgrounds meet at least AA 4.5:1 before launch.
Validate label, placeholder, and helper text on input surfaces; catch light gray placeholders that fail contrast.
Retest inverted pairs — a color that passed on white often fails on charcoal without a lighter text step.
Document which brand hues are allowed for small text vs large headings only, using AA/AAA results as the rule.
Tip: after you finish, check Related tools at the bottom of this page for the next step in your workflow.
Quick answers about tools, privacy, limits, and pricing.
Normal text: at least 4.5:1. Large text (about 18pt+ or 14pt+ bold): at least 3:1. Many teams also target 3:1 for icons and UI boundaries (WCAG 2.1 non-text contrast).
AAA normal text requires 7:1; AAA large text requires 4.5:1. AAA is stricter and better for long reading, but not every brand primary will reach 7:1 on white.
Each HEX is converted to sRGB, linearized, and combined into relative luminance. The ratio is (Lighter + 0.05) / (Darker + 0.05), matching WCAG 2.x.
No single pair covers every pixel. Sample the lightest and darkest areas under the text, or place a solid scrim behind copy so the worst-case pair still passes.
Yes. WCAG allows a lower ratio (3:1 for AA) for large text because bigger glyphs are easier to read. Confirm your CSS size/weight truly qualifies as large text.
Yes. Color math runs in your browser; HEX pairs are not uploaded for scoring.
Some tools approximate, use Display-P3, or measure blended pixels. This checker targets classic WCAG 2 sRGB relative luminance for solid pairs — the formula used by most auditors.
Yes. Contrast Checker is free to use on ezToolFlow. Guests and free accounts may have daily limits on some tools; premium tiers can raise or remove those limits. AI tools may also spend credits.
For browser-based tools, processing runs on your device when possible and files are not uploaded for conversion. Optional accounts, usage limits, and AI features are described in our Privacy Policy.
No for most tools — you can start as a guest. An account helps keep higher daily limits and saved work (for example AI resumes).
Keep working with similar free tools — no signup required for most.
Pick colors, convert between HEX, RGB, HSL formats
Open toolCreate QR codes for URLs, text, Wi‑Fi, email & phone — download PNG/SVG
Open toolDesign gradients and copy CSS
Open toolTune box-shadow and export CSS
Open toolScan QR codes from camera or uploaded images free in your browser
Open toolGenerate custom placeholder images by size and color free online
Open tool