Normal Text Uses a 4.5:1 AA Threshold
Body copy, labels, captions, and other text below the large-text definition need at least 4.5:1 for AA. The tool compares the full value, so a displayed rounded result never upgrades a failure.
Free online WCAG 2.2 tool - no registration or login
Free WCAG Color Contrast Checker: AA & AAA
Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.
- - Opaque sRGB HEX pairs
- - AA and AAA text checks
- - 3:1 UI and graphics check
- - Current-tab calculation
Check an exact color pair
Results use WCAG 2.2 relative luminance. Pass or fail uses the full value even though the large ratio is rounded for display.
Opaque #RGB or #RRGGBB. Press Enter or leave the field to apply.
Opaque #RGB or #RRGGBB. Press Enter or leave the field to apply.
Example pairs
Live text preview
Readable text helps everyone complete the task with less effort.
Contrast ratio17.46:1Full: 17.457:1
Active sample
AA passes for normal text
Needs 4.5:1 for AA and 7:1 for AAA at this size and weight.
WCAG checkMinimumResult
AA normal text4.5:1Pass
AA large text3:1Pass
AAA normal text7:1Pass
AAA large text4.5:1Pass
UI and graphics AA3:1Pass
The active sample passes AA. Keep the selected size and weight, then repeat the check for every state that uses a different color pair.
The UI and graphics row applies only when these colors represent the essential visual and its actual adjacent color. One pair result is not a site-wide accessibility audit.
The calculation runs in this browser tab. This checker supports opaque sRGB #RGB and #RRGGBB colors; it does not inspect gradients, images, transparency, or an entire website.
- Only opaque sRGB #RGB and #RRGGBB colors are supported.
- The result checks one color pair and is not a legal or site-wide accessibility certification.
- Gradients, background images, transparency, thin-font rendering, and changing states require contextual review.
How to Check Color Contrast Online
Move from an exact color pair to the correct text context, a defensible result, and a copyable handoff.
Common contrast checks
- Check normal body text against a light page background
- Confirm whether a bold 20px heading counts as large text
- Test an icon or input border against its adjacent surface
- Copy a color-pair report for a design or code review
- Step 1
Enter text and background colors
Pick or type opaque HEX values. An invalid or incomplete value shows an error while the last valid color remains active.
- Step 2
Set the sample text size and weight
Match the intended CSS context so the active verdict uses the correct WCAG threshold for normal or large text.
- Step 3
Review, fix, and copy the result
Read the ratio and pass or fail matrix, try the AA suggestion when needed, then copy a concise result for handoff.
Understand WCAG AA and AAA Contrast Results
One calculated ratio is compared with different WCAG 2.2 thresholds based on text size, weight, and conformance level.
Large Text Can Use a 3:1 AA Threshold
Text qualifies as large at 24px with a regular weight, or about 18.67px when bold. A heading element or visually prominent label is not automatically large text.
AAA Uses 7:1 and 4.5:1 Thresholds
Enhanced contrast requires 7:1 for normal text and 4.5:1 for large text. Treat these as results for the selected pair, not as a claim that the whole page conforms at Level AAA.
Fix a Color Pair That Fails
A failed result should lead to a concrete next step while leaving room for brand and design-system review.
Try a failing pairTry the Suggested AA Text Color
The suggestion moves the foreground toward black or white until it reaches the active sample's AA target. It is a practical correction, not a claim to be the perceptually closest brand color.
Compare Black and White Text
Testing simple extremes helps reveal which direction improves the pair. Use that direction to adjust a brand shade deliberately instead of changing several variables at once.
Recheck Every Interactive State
Hover, focus, selected, disabled, placeholder, visited, and error states can introduce new pairs. Repeat the check whenever foreground, boundary, icon, or surface colors change.
Check UI Components, Icons, and Design States
Essential non-text visuals have a separate 3:1 requirement against their relevant adjacent color, and color should not carry meaning alone.
Test Boundaries and Essential Graphics
Use the foreground and background fields for the actual input border, button outline, icon, chart segment, or focus indicator and the surface directly beside it.
Check Focus, Selected, and Error States
A component may pass at rest and fail after interaction. Test each meaningful state using the colors that are actually rendered in that state.
Do Not Use Color as the Only Signal
Add text, icons, patterns, shapes, or another visible cue for status and meaning. A strong ratio does not make a color-only instruction understandable to everyone.
Know What a Solid-Color Contrast Test Cannot Prove
The result is deterministic for two specified opaque sRGB colors, but real interfaces still require contextual and manual evaluation.
Images, Gradients, and Transparency Need Context
The effective background can vary across an element. Evaluate the final composited design and check the lowest-contrast areas instead of treating one solid pair as representative.
Thin Fonts and Rendering Still Affect Readability
Anti-aliasing and thin glyphs can appear lighter than the specified CSS color. Passing the computed pair is necessary, but visual review at the intended size still matters.
Passing One Pair Is Not a Full Accessibility Audit
Contrast is one requirement among many. A complete review also covers every component and state, structure, keyboard operation, zoom and reflow, and assistive technology behavior.
Color Contrast Checker FAQ
Direct answers about WCAG thresholds, large text, rounded values, UI components, suggestions, privacy, and test scope.
Is this color contrast checker free to use?
Yes. The color contrast checker is free to use online without registration or login, and the result is not hidden behind an account gate.
What contrast ratio passes WCAG AA?
WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text. Essential visual information in user interface components and graphical objects also needs at least 3:1 against the relevant adjacent color.
What contrast ratio passes WCAG AAA?
WCAG 2.2 AAA requires at least 7:1 for normal text and 4.5:1 for large text. A pair-level AAA result does not mean an entire page or website conforms at Level AAA.
What counts as large text in WCAG?
Large text is at least 24 CSS pixels at a regular weight, or about 18.67 CSS pixels when bold. This tool treats weight 700 as bold and uses the selected size and weight to classify the active preview.
Does a displayed 4.50:1 always pass normal-text AA?
No. The visible ratio is rounded to two decimals for readability, but pass or fail uses the full calculated value. A value such as 4.499:1 is not rounded up to pass a 4.5:1 requirement.
Can this tool suggest a color that passes?
When the active text sample fails AA, the tool can suggest a practical foreground adjustment toward black or white that reaches the active threshold. Review the suggestion against your brand, design system, and every interactive state before using it.
Can I check buttons, icons, and form borders?
Yes, when the two selected colors represent the essential component boundary, icon, or graphic and its actual adjacent color. Use the UI and graphics AA row, which checks the 3:1 threshold, and test each distinct state separately.
Can I check gradients, images, or transparent colors?
Not with this solid-color checker. It accepts opaque sRGB HEX colors because gradients, images, and transparency can create different effective backgrounds across the same element and need contextual evaluation.
Does a passing result make my website WCAG compliant?
No. This result covers one specified color pair. A complete accessibility review also needs to check all states and components, keyboard use, semantics, zoom and reflow, content structure, and assistive technology behavior.
Does the tool upload or save my colors?
No external service is used for the calculation. Your colors, sample text, and settings remain in the current browser tab and return to the starter values when the page reloads.
Related design tools
Choose a color, build a gradient, style a shadow, or prepare an SVG icon for the next design step.
Ca Design
Choose and Convert a Color
Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.
Open tool Ba Design
Build a CSS Gradient
Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.
Open tool Ca Design
Create a CSS Box Shadow
Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.
Open tool Oa Design
Optimize an SVG Icon
Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.
Open toolReady to check a color pair?
Enter the colors, match the text context, and copy a clear WCAG result.