How It Works

The calculator converts both colors to sRGB, computes relative luminance for each, and then applies the WCAG contrast ratio formula. The result is a single ratio (for example, 4.50:1). Higher ratios indicate stronger contrast and typically better readability. The tool then compares your ratio to WCAG thresholds for normal and large text, including both AA and AAA levels.

Behind the scenes, the process is consistent with common accessibility guidance: sRGB values are first normalized to a 0–1 range, then “linearized” to account for gamma correction, and finally weighted to reflect human sensitivity to different channels (red, green, and blue). This yields relative luminance—a measurement of perceived brightness—used by WCAG for contrast evaluation.

The checker also normalizes shorthand HEX values like #fff into 6-digit form (#ffffff) so your design tokens and quick inputs behave the same way.

Step-by-step

• 1) Enter colors: Provide a text (foreground) color and a background color in HEX format (e.g., #1a73e8). The color picker can help you choose quickly.
• 2) Calculate ratio: The tool computes relative luminance for each color and applies the contrast ratio formula.
• 3) View compliance: See whether the ratio passes WCAG AA or AAA for normal text and large text.
• 4) Read the details: Optional details include luminance and RGB conversions, which are useful when comparing palette options or auditing design tokens.
• 5) Copy or download: Copy a report-ready summary or download it as a text file for documentation, QA, or accessibility reviews.

Key Features

Instant WCAG contrast ratio

Calculate the exact contrast ratio between two colors and display it in a clear “X:1” format that designers and developers recognize. Ratios like 3:1, 4.5:1, and 7:1 are meaningful because they align with common WCAG thresholds. Seeing the precise number helps you decide whether you have enough margin for future tweaks, hover states, or theme changes.

AA and AAA pass/fail for normal and large text

WCAG defines different thresholds depending on text size. The checker shows outcomes for both normal text and large text so you can evaluate body copy, headings, and UI labels properly. For example, a ratio might fail AA for normal paragraph text but pass for a large heading—useful when you want to keep a brand color in headlines while choosing a more accessible color for body text.

Color picker + HEX input

Use the color picker to explore options quickly, or paste a HEX value directly from a design system token, CSS variable, or brand guide. Designers can iterate on palettes while keeping accessibility visible, and developers can test real values from code without guessing what the designer meant.

Readable, copy-ready report

The results panel formats a concise report you can paste into tickets, design reviews, audit notes, or acceptance criteria. It includes the foreground and background values, the computed ratio, and a clear AA/AAA pass/fail summary. This makes it easy to document accessibility decisions without extra screenshots or manual formatting.

Helpful edge-case handling

If a color value is invalid, the tool explains what to fix instead of producing misleading output. It also normalizes shorthand HEX values (like #fff) to full 6-digit HEX, and provides both HEX and RGB representations. This is helpful when you need to coordinate between design tools (often HEX-first) and code or asset pipelines (sometimes RGB-first).

Use Cases

• Design systems: Validate token pairs (text-on-surface, text-on-primary, text-on-secondary) and document compliant combinations in your style guide.
• UI/UX reviews: Check button labels, navigation links, form hints, placeholder text, badges, and subtle captions during design critique.
• Frontend development: Confirm contrast before merging changes that affect themes, component states, or dark mode palettes.
• Marketing & content: Ensure banners, landing pages, and infographics remain readable across devices, lighting conditions, and compression artifacts.
• Accessibility audits: Create a simple report of ratios and pass/fail outcomes to support compliance workflows and remediation planning.
• Product theming: Compare light and dark themes, evaluate hover/active/disabled states, and keep every state accessible.
• Data visualization: Validate label colors on chart backgrounds, legends, and tooltips for legibility, especially in dense dashboards.
• Client approvals: Provide an objective contrast ratio when discussing brand colors and readability, reducing subjective debates in stakeholder reviews.

In real products, contrast issues frequently appear in places that are easy to miss: helper text under form fields, subtle timestamps in lists, disabled button labels, and secondary navigation. These elements are often smaller than headings, so they require stronger contrast to remain readable. A fast contrast check prevents “invisible UI” problems that frustrate users and generate support tickets.

Contrast checking is also valuable when you use gradients, images, or overlays. A color may pass on a flat background but fail over a hero image or a translucent overlay. If your background isn’t uniform, test the worst-case area (the part where the text blends the most) to ensure users can read content everywhere it appears.

Optimization Tips

Prioritize body text and critical UI labels

Start with the smallest text users must read to complete tasks: form labels, button text, warnings, and error messages. These are high-impact elements because users rely on them for navigation and input. If these pass, headings and large text usually pass more easily. When in doubt, treat microcopy as “normal text” and aim for AA or better.

If you have multiple text styles, test them as they will appear in production. A thin font weight can feel less readable even at the same ratio, so many teams aim for a comfortable margin above the minimum threshold to account for typography and rendering differences across platforms.

Adjust luminance, not just hue

Changing a color’s hue (for example, making blue “more purple”) may not increase contrast. Contrast is driven mainly by luminance. If you need a quick improvement, lighten the background or darken the foreground until the ratio crosses the target threshold. This approach is predictable and works well when you are constrained by brand palettes.

A practical workflow is to keep brand colors for large surfaces and accents, and use an accessible neutral (near-black for light themes or near-white for dark themes) for text. You still preserve the brand feel while ensuring comfortable readability.

Be cautious with transparency and overlays

Opacity can reduce contrast unpredictably because the final color depends on what is underneath. For example, 60% white text on a dark background might look fine on one panel but fail over a darker gradient region. When using overlays, compute contrast against the effective blended color, or test in the real UI context where the overlay is applied.

If your UI includes images, consider adding a solid scrim behind text, choosing a stronger text color, or limiting text placement to areas with consistent brightness.

FAQ