Color Contrast Checker

Introduction

The DeviceHub Color Contrast Checker is a free online WCAG 2.x relative-luminance calculator for sRGB hex foreground and background pairs, without installing design plugins, without crawling your production DOM, and without claiming to replace WAVE, axe DevTools, Lighthouse accessibility scores, or a professional accessibility audit. Product designers verifying brand tokens against AA or AAA thresholds, engineers checking button labels before a release, educators teaching why light gray on white fails, QA capturing a shared ratio for tickets, and content authors confirming call-to-action text all enter two hex colors on one HTTPS page and read an honest contrast ratio grounded in the WCAG relative luminance formula for sRGB. DeviceHub states limits plainly: this tool uses WCAG 2.x relative luminance math for sRGB hex; it is not a full page audit crawler, not a WCAG 3 / APCA certification desk, not a medical or clinical color-vision diagnosis, and not a substitute for Color Blindness Test educational simulations that already live under Display. Pair with Accessibility Preferences when you need prefers-contrast media results from the OS. Pair with Forced Colors Test when Windows High Contrast or forced-colors mode rewrites palettes. Pair with Color Blindness Test for empathy and confusion learning, not clinical screening. Pair with Display Contrast Test when the complaint is panel washout rather than token math. Pair with Accessibility Preferences for a hub view of prefers-* features beside this calculator. Schools bookmark Color Contrast Checker because permissions stay none, no camera, microphone, geolocation, or clipboard prompts merely to compute luminance. Capture the exact hex strings from the failing component; screenshots of a different brand shade waste engineering time. Corporate brand books often list Pantone or CMYK values that must be converted to sRGB before WCAG 2.x web math applies, document that conversion. Translucent overlays, text on photographs, CSS mix-blend-mode, and CSS color(display-p3 …) can pass or fail differently from a flat hex pair; DeviceHub will not invent a crawler pass for those cases. Never treat a single AA pass as proof the entire marketing site is accessible, and never present ratios as clinical acuity scores or fitness-for-duty certificates.

What this tool does

On load, Color Contrast Checker accepts two sRGB hex colors, converts channel values through the WCAG 2.x relative luminance path, computes the contrast ratio between foreground and background, and surfaces guidance against common AA and AAA thresholds for normal and large text so teams can discuss tokens with a shared number. It does not crawl your sitemap, does not inject axe-core into third-party origins, does not rate non-text UI components automatically, and does not upload brand palettes to DeviceHub for advertising when you merely use the page. Guidance separates hex-pair math from live CSS computed styles that include alpha, gradients, and images. Side notes point to Color Blindness Test when the question is educational simulation of confusion pairs, not a clinical diagnosis, and to Contrast Test when ambient light or monitor calibration makes mid-gray hard to read regardless of token ratios. Permissions remain none in DeviceHub’s typed PermissionKind union. Refresh after changing design tokens in Figma exports so the hex you paste still matches production CSS variables. The UI never claims APCA or WCAG 3 conformance certificates from a two-color form. When a pair fails AA, document size, weight, and whether the control is icon-only so engineers do not “fix” the wrong threshold. Closing the tab clears the session; screenshots you take remain your files. Notes remind support staff that mobile OLED night modes and True Tone can change appearance without changing the hex math DeviceHub reports, label results as WCAG 2.x sRGB pair ratios, not photographed appearance under auto-brightness.

When to use it

Run Color Contrast Checker when adopting a new brand palette, when a stakeholder asks whether gray-on-gray buttons meet AA, when converting Figma tokens into CSS custom properties, when filing bugs that need a numeric ratio instead of “hard to read,” when teaching WCAG 2.x luminance in design courses, and when comparing light and dark theme pairs before launch. Prefer Accessibility Preferences when the user report is “my OS wants more contrast” rather than a specific hex pair. Prefer Forced Colors Test when High Contrast mode strips brand colors entirely. Prefer Color Blindness Test for educational empathy about confusion, not medical diagnosis or workplace forms. Prefer Display Contrast Test when the panel itself looks washed out under bright office lights. Prefer Accessibility Preferences for a single overview of prefers-* media beside contrast math. Avoid treating a calculator pass as a WAVE/axe replacement for heading structure, keyboard order, or ARIA. Avoid pasting Display P3 CSS without converting to sRGB first. Retest after marketing swaps hero image backgrounds under text. Use in design-system PR checklists beside screenshots of the live component. Use when legal or compliance asks for a documented method, and still schedule a professional audit for production sites.

How it works

WCAG 2.x defines relative luminance for sRGB by linearizing 8-bit channels and combining them with standard coefficients, then forming a contrast ratio between the lighter and darker luminance values. DeviceHub applies that math to the hex pair you provide and maps the ratio to familiar AA/AAA cutoffs for text. It does not evaluate CSS currentColor inheritance trees, does not sample pixels from a canvas screenshot of your site, and does not certify PDF or native app contrast. Typed permissions stay none, reading two hex strings needs no camera or microphone category. Secure HTTPS hosts the calculator consistently. Browser color management can make the swatch preview look slightly different from a calibrated reference monitor; the numeric ratio still follows the WCAG sRGB formula on the entered channels. Large-text exceptions depend on CSS pixel size and weight in the real UI, DeviceHub’s guidance is informational, not a substitute for measuring the shipped type style. Non-text contrast (UI components, graphics) uses related but distinct WCAG success criteria; do not assume a text AA pass covers icon strokes. Color Blindness Test remains under Display for simulation and must never be framed as clinical screening here. Professional tools such as WAVE and axe evaluate structure, names, and roles this checker cannot see. No DeviceHub server needs your brand hex values to compute a local ratio, processing stays in-page. Fingerprinting via two public brand colors is negligible; still avoid pasting unpublished campaign hexes into public tickets if secrecy matters. Compared with prefers-contrast media queries elsewhere in this suite, hex math is author-controlled while OS contrast preferences reflect user settings, keep those jobs separate in tickets.

Step-by-step instructions

1. Open Color Contrast Checker over HTTPS and confirm you have the production or design-token sRGB hex values, not a phone photo of a billboard.
2. Enter foreground (text or icon) and background colors; adjust until the preview matches the intended pairing.
3. Read the contrast ratio and which WCAG 2.x level applies for the text size class you actually ship.
4. If OS high-contrast or preference media matters, continue to Forced Colors Test, Accessibility Preferences.
5. For educational color-vision simulation, not clinical diagnosis, open Color Blindness Test; for panel washout open Display Contrast Test.
6. Paste results labeled as WCAG 2.x sRGB pair math, not a full site audit and not a medical finding, and schedule WAVE/axe or professional review for page-level conformance.

Common problems

Assuming a hex-pair pass means the whole page passes WAVE or axe. Using Display P3 or wide-gamut CSS without sRGB conversion. Ignoring alpha and text-on-image failures. Treating large-text thresholds as a free pass for tiny captions. Confusing Color Blindness Test educational results with clinical diagnosis. Blaming DeviceHub when True Tone changes appearance but hex math is unchanged. Expecting the tool to crawl multi-page marketing sites. Filing workplace vision forms from contrast ratios. Mixing Display Contrast Test panel issues into token bugs without separating causes. Forgetting dark-theme pairs need their own checks. Claiming AAA everywhere when only AA was required. Replacing professional audits with a calculator screenshot. Pasting competitor brand colors into public forums unnecessarily. Ignoring non-text UI contrast criteria. Using the preview swatch under extreme monitor calibration as “proof” the math is wrong.

Privacy explanation

Color Contrast Checker computes ratios from colors you enter and displays results locally. DeviceHub does not upload brand palettes for advertising when you use this page. Permissions stay none, no microphone, camera, MIDI, clipboard, or geolocation prompts for luminance math. Closing the tab ends the session; nothing keeps sampling your design system in the background. Screenshots of ratios are your choice, avoid posting unpublished campaign hexes if secrecy matters. Classroom demos should clear the form before the next student if proprietary tokens are on screen. Combined with Accessibility Preferences readouts, contrast math does not create a medical record, DeviceHub tools are informational, not clinical. No health data is inferred from hex pairs.