Color Contrast Checker
Check your color combinations against WCAG 2.1 accessibility standards. Enter a foreground and background color to see the contrast ratio and whether it passes AA and AAA compliance for normal and large text.
Contrast Checker
Enter a hex color for your text
Enter a hex color for your background
How to Use This Tool
Enter Your Colors
Type hex codes or use the color pickers to select your foreground (text) and background colors. Both 3-digit and 6-digit hex codes are supported.
Check Contrast
Click the Check Contrast button to calculate the WCAG 2.1 contrast ratio. Use the Swap Colors button to quickly reverse the foreground and background.
Review Results
See the contrast ratio, a live text preview, and whether your color pair passes AA and AAA standards for both normal and large text sizes.
WCAG 2.1 Contrast Ratio Formula
CR = (L1 + 0.05) / (L2 + 0.05)The contrast ratio is calculated using the relative luminance of each color per the WCAG 2.1 specification. L1 is the luminance of the lighter color and L2 is the luminance of the darker color.
The calculation follows these steps:
- Linearize sRGB: Convert each 8-bit channel to linear light. If the normalized value is <= 0.04045, divide by 12.92; otherwise apply
((val + 0.055) / 1.055) ^ 2.4 - Relative luminance: Weight the linear channels:
L = 0.2126R + 0.7152G + 0.0722B - Contrast ratio: Divide the lighter luminance (plus 0.05) by the darker luminance (plus 0.05) to get a ratio from 1:1 to 21:1
WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced readability (AAA level). Large text thresholds are lower: 3:1 for AA and 4.5:1 for AAA.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA compliance?
For WCAG 2.1 Level AA, normal text (under 18pt or 14pt bold) needs a minimum contrast ratio of 4.5:1. Large text (18pt and above, or 14pt bold and above) needs a minimum of 3:1.
What is the difference between WCAG AA and AAA?
WCAG AA is the standard level of accessibility compliance required by most regulations. WCAG AAA is a higher, enhanced level. For AAA, normal text needs 7:1 contrast and large text needs 4.5:1. While AAA is ideal, it can be difficult to achieve for all content.
How is the contrast ratio calculated?
The contrast ratio uses the WCAG 2.1 formula based on relative luminance. Each sRGB color channel is converted to linear light, then weighted (0.2126R + 0.7152G + 0.0722B) to get luminance. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color, yielding a value from 1:1 (no contrast) to 21:1 (maximum contrast).
What counts as large text in WCAG?
Large text is defined as 18 point (24px) or larger for regular weight, or 14 point (approximately 18.66px) or larger for bold weight. Large text has lower contrast requirements because bigger characters are easier to read.
Related Tools
More free calculators and tools you might find useful
DNS Propagation Checker
Check DNS propagation across global servers instantly. Verify A, AAAA, CNAME, MX, NS, TXT, and SOA records from 7 independent resolvers worldwide. Free, fast, and private -- no data stored.
Find My IP Address
Instantly find your public IP address. See your IPv4 address, timezone, browser details, and copy your IP to clipboard with one click. Free, fast, and private.
Hex Color to Pantone Converter
Convert hex color codes to the closest Pantone color match. Uses Delta-E color distance in CIELAB color space for accurate matching. View RGB, HSL, and CMYK conversions.
JSON Formatter
Format, beautify, and minify JSON data online. Validate JSON syntax with detailed error messages including line and column numbers. Supports 2-space, 4-space, and tab indentation.
JSON Schema Validator Online
Validate JSON data against a JSON Schema online. Paste your schema and data, get instant validation results with detailed error messages. Free browser-based tool -- no data sent to servers.
Markdown to Confluence Converter
Convert Markdown to Confluence wiki markup instantly. Supports headings, bold, italic, links, images, code blocks, tables, and lists. Free browser-based tool with no data sent to servers.