Explore our collection of 150+ developer tools, PDF editors, and image converters. Everything runs locally in your browser.
Ubify Media & Design Operations
UI/UX & DIGITAL MEDIA SPECIALISTS
About This Tool
The WCAG Color Contrast Ratio Checker tests foreground text and background color pairs against Web Content Accessibility Guidelines (WCAG) 2.1 specifications.
Sufficient color contrast ensures digital content remains readable for users with moderate low vision, color vision deficiencies, or aging vision, as well as anyone viewing screens in bright sunlight.
### How the WCAG Ratio is Calculated 1. Channel Linearization: 8-bit sRGB color channels (0 to 255) are normalized and linearized according to the standard ITU-R BT.709 transfer function: C_linear = C <= 0.03928 ? C / 12.92 : ((C + 0.055) / 1.055)^2.4. 2. Relative Luminance: Luminance L is computed as L = 0.2126 × R + 0.7152 × G + 0.0722 × B. 3. Contrast Ratio: Contrast R is calculated as (L_lighter + 0.05) / (L_darker + 0.05), producing a ratio ranging from 1:1 (zero contrast) to 21:1 (maximum black against white).
### WCAG 2.1 Compliance Thresholds - AA Normal Text: Requires at least 4.5:1 for standard body text (under 18pt or under 14pt bold). - AAA Normal Text: Requires at least 7.0:1 for enhanced readability. - AA Large Text & UI: Requires at least 3.0:1 for text 18pt+ (or 14pt bold) and graphical user interface components.
### Real Color Pair Example Test white text (#FFFFFF, relative luminance 1.000) against dark slate background (#0F172A, relative luminance 0.0097): Contrast Ratio = (1.000 + 0.05) / (0.0097 + 0.05) = 1.05 / 0.0597 ≈ 17.58:1. This combination passes AA Normal Text (17.58 ≥ 4.5), AAA Normal Text (17.58 ≥ 7.0), and AA Large Text (17.58 ≥ 3.0).
### Processing and Privacy All color parsing, luminance conversions, and WCAG threshold checks execute entirely in your web browser. No color palettes or inputs are sent across any network.
How to Use
- 1
Enter or paste a foreground text hex color (e.g. #FFFFFF) or pick from the color input.
- 2
Enter or paste a background hex color (e.g. #0F172A) or choose from the color picker.
- 3
Review the calculated contrast ratio (e.g. 17.58:1) and compliance badges for AA Normal, AAA Normal, and AA Large text.
- 4
Adjust either color slider or hex code to achieve passing compliance thresholds.
Frequently Asked Questions
What is the minimum contrast ratio for standard web text?
Under WCAG 2.1 Level AA guidelines, standard body text smaller than 18pt (or 14pt bold) must maintain a contrast ratio of at least 4.5:1 against its background.
What qualifies as large text under WCAG?
Large text is defined as at least 18pt (24px) regular weight or at least 14pt (18.66px) bold weight. Large text requires a minimum ratio of 3.0:1 for Level AA compliance.
Are my brand color palettes sent to a server?
No. The contrast checker executes all luminance math in-browser via JavaScript.