Contrast Ratio Calculator (WCAG)

Contrast ratio calculator: test text and background colors against WCAG AA and AAA thresholds for accessible color contrast. Free, runs in your browser.

Enter 3 or 6 digit hex colors (for example #2563eb or #25e). The check uses the WCAG 2.1 relative-luminance formula.

Updates automatically as you type.

Calculated in your browser; your inputs are not sent to us. Privacy

Results will appear here.
Calculation details
Every figure above is calculated locally in your browser from the assumptions shown. No inputs are sent anywhere. See the methodology section below for the formulas used.
Use this resultShare the current inputs, or ask ChatGPT to explain the calculation in context.
Ask an AI to explain this result
Share this result

Planning estimate only, not financial, tax, or legal advice. Verify assumptions and current rules before making decisions.

This tool runs in your browser. Your calculator inputs and results are never transmitted to us or to ad/affiliate partners. Ads and sponsored links may set third-party cookies to serve and measure them, but they never receive your calculation values. If you explicitly save a scenario, its permitted fields stay in local browser storage until you clear them. See our Privacy Policy.

Use this result

Share the current inputs or ask ChatGPT to explain the calculation in context.

More options
Report a calculation issue
Direct answer

What does this calculator estimate?

Contrast ratio calculator: test text and background colors against WCAG AA and AAA thresholds for accessible color contrast. Free, runs in your browser.

Transparent methodology

How this calculator works

Formula

Contrast = (L1 + 0.05) / (L2 + 0.05) using relative luminance L = 0.2126R + 0.7152G + 0.0722B (sRGB, gamma-corrected).

Worked example

#14243a on #f6f5ef gives a 14.31:1 ratio, which passes WCAG AAA for normal text (needs 4.5:1).

Frequently asked questions

What is a contrast ratio calculator and how does it work?

A contrast ratio calculator is a browser-based tool that measures the luminance difference between two colors to ensure they meet WCAG accessibility standards, requiring no signup or data storage.

How do I use the contrast ratio calculator to check WCAG compliance?

Simply input your foreground and background hex or RGB values into the contrast ratio calculator, and it will instantly display the ratio and whether it passes AA or AAA standards for normal and large text.

Do I need to create an account or share my data to use this contrast ratio calculator?

No, this is a completely no-signup, browser-based tool that processes all color calculations locally on your device, ensuring your data never leaves your computer.

Cite this tool

BoringToolsKit. “Contrast Ratio Calculator (WCAG).” boringtoolskit.com/contrast-ratio-calculator/. Free to reference in articles, syllabi, and answer posts with a link.

Privacy: Inputs and results stay in this browser. Any future sponsored recommendation or advertisement will be clearly labeled and kept separate from the calculation.

Worked example: #2563eb on white, step by step

Take foreground #2563eb on background #ffffff. Step 1: split the hex into channels and scale to 0-1. R = 37/255 = 0.145098, G = 99/255 = 0.388235, B = 235/255 = 0.921569. Step 2: linearize each channel. Any value above 0.03928 becomes ((c + 0.055) / 1.055) ^ 2.4, which gives 0.018500, 0.124772 and 0.830770. White is 1.0 in and 1.0 out.

Step 3: weight each linearized channel. 0.2126 x 0.018500 = 0.003933 for red, 0.7152 x 0.124772 = 0.089237 for green, 0.0722 x 0.830770 = 0.059982 for blue. Those sum to 0.153152 relative luminance. Step 4: (1.0 + 0.05) / (0.153152 + 0.05) = 1.05 / 0.203152 = 5.1686, rendered as 5.17:1. That clears 4.5 but not 7: AA for normal text, AAA for large text only.

Where the printed number and the verdict disagree

The readout rounds to two decimals but the verdict tests the unrounded value, so they can disagree. #959595 on white computes to 2.9953 and prints 3.00:1, yet the verdict reads Fails AA because the pass line is 3.0000. #5078b2 on white computes to 4.4963 and prints 4.50:1, yet the verdict stays AA (large text) only. #ff0000 on white is 3.9985 and prints 4.00:1. When a printed figure sits on a threshold, trust the verdict line, not the digits.

Boundaries: identical colors give 1.00:1 and Fails AA, while black on white gives 21.00:1, the hard ceiling for 8-bit sRGB. Near the AA line one 8-bit step flips the verdict: #767676 on white is 4.54 and passes for normal text, #777777 is 4.48 and drops to large text only, a swing of 0.064 from a single increment. Channel values are gamma encoded, so #808080 is not half bright: it linearizes to 0.2159 and gives 3.95:1 on white. Empty or non-hex input returns NaN:1 with Fails AA. Alpha is not supported.