Color Contrast Checker
Contrast ratio
4.51:1
Normal textLarge text sample
- AA normal text (4.5:1)Pass
- AA large text (3:1)Pass
- AAA normal text (7:1)Fail
- AAA large text (4.5:1)Pass
Paste a foreground and a background hex color to get the exact WCAG contrast ratio between them. The tool tells you whether the pair passes the AA and AAA thresholds for both normal and large text, with a live preview so you can judge readability at a glance. Everything runs in your browser, so your colors never leave your device.
How to use
- Enter your text color in the foreground field, as a hex value like #1a73e8 or #fff.
- Enter your background color in the background field, for example #ffffff.
- Read the contrast ratio and the pass or fail badges for AA and AAA at normal and large text sizes.
- Use the color pickers or the swap button to try variations until the pair passes the level you need.
- Adjust until you reach at least 4.5:1 for normal text (AA) or 7:1 for AAA.
Examples
- Foreground #000000 on background #ffffff gives a ratio of 21:1, which passes AA and AAA at every text size.
- Foreground #777777 on background #ffffff gives 4.48:1, which fails AA for normal text but passes AA for large text.
- Foreground #1a73e8 on background #ffffff gives 4.51:1, which passes AA for normal text but falls short of AAA.
FAQs
- How is the contrast ratio calculated?
- Each color is converted from sRGB to linear values, then its relative luminance is found with L = 0.2126*R + 0.7152*G + 0.0722*B. The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), which always lands between 1:1 and 21:1.
- What contrast ratios do WCAG AA and AAA require?
- AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA needs at least 7:1 for normal text and 4.5:1 for large text. Large text means 18pt, or 14pt bold, and larger.
- What counts as large text?
- WCAG treats text as large when it is at least 18pt (roughly 24px) regular weight, or at least 14pt (roughly 18.66px) bold. Large text has a lower contrast requirement than normal body text.
- What hex formats can I enter?
- You can enter three or six digit hex, with or without a leading hash, in upper or lower case. So #fff, fff, #FFFFFF, and #ffffff all work. Anything that is not valid hex returns a clear error.
- Does the order of the two colors matter?
- No. The contrast ratio is symmetric, so swapping the foreground and background gives the same number. The swap button is there for convenience when you want to preview the reversed pairing.
- Does this cover non text elements like icons and borders?
- The AA and AAA checks here target text. For user interface components and graphics, WCAG asks for a separate 3:1 minimum, which matches the AA large text threshold shown above.
Related tools
- Hash GeneratorGenerate SHA-1, SHA-256, SHA-384, and SHA-512 hashes of any text in your browser. Fast, private, and copy ready.
- Number Base ConverterConvert integers between binary, octal, decimal, and hexadecimal. Pick a source base, enter a value, see the other three. Handles large numbers.
- JSON FormatterFormat, validate, and beautify JSON in your browser. Paste messy JSON, get clean indented output, then copy it back. Free, no signup.
- Base64 EncoderEncode text to Base64 or decode Base64 back to text in your browser. Full UTF-8 support and clear errors on invalid input.
- URL EncoderPercent encode and decode text for URLs in your browser. Toggle direction, copy results, and see clear errors on malformed input.
- HTML Entity EncoderEncode special characters to HTML entities or decode them back. Handles ampersand, less than, greater than, and quotes with a direction toggle.