Color contrast checker
Use this color contrast checker to measure a foreground against a background. Review WCAG 2.2 AA and AAA results, the nearest passing color, transparent layers and palette pairs.
Free, no sign-up. Runs in your browser, with no AI calls.
Contrast ratio
4.54:1
| Used for | Level | Needs | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | Pass |
| Large text | AA | 3:1 | Pass |
| Interface parts and graphics | AA | 3:1 | Pass |
| Normal text | AAA | 7:1 | Fail |
| Large text | AAA | 4.5:1 | Pass |
This preview uses the Machado 2009 model at full severity. It is an approximation of color perception, not a diagnosis. WCAG results always use the original visible colors.
Machado, Oliveira and Fernandes: published modelNormal text at 16 pixels looks like this sentence.
Large text at 24 pixels
A border at 2 pixelsColor vision model license
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Check a palette
Add at least two colors to compare a palette. Repeated colors are counted once.
A color contrast checker measures two colors as a ratio from 1:1 to 21:1. Check WCAG 2.2 AA and AAA text levels and the 3:1 non-text threshold. Find a hue-preserving passing color, flatten transparent layers onto a chosen canvas, compare up to 12 palette colors and preview color vision deficiencies with the Machado model.
How to use this tool
- Enter two colors
- Type a hex code such as #1a1a2e or #fff, an rgb() or hsl() value, or a CSS color name such as navy, or use the color pickers. Alpha in rgba(), hsla() and 4 or 8 digit hex is accepted. Set the underlying canvas color to flatten transparent background and text layers. The opacity sliders multiply the alpha already in each input. Contrast uses the unrounded composited colors; the hex labels are approximate.
- How the ratio is worked out
- Each color’s relative luminance comes from the WCAG formula, and the ratio is the lighter one plus 0.05 divided by the darker one plus 0.05. The ratio is shown rounded down to two decimals, so 4.499 never shows as a pass.
- What the levels mean
- AA is the level most laws and policies point to: 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1. Large text means at least 24 px, or about 18.7 px in bold. Icons, input borders and focus outlines need 3:1 against the colors next to them.
- The suggested color
- When a level fails, we keep the hue and saturation of the color you chose to change and move only its lightness, one small step at a time, until the ratio passes. The nearest passing color is shown with its own ratio. Nearest means smallest change in HSL lightness at 0.001 steps, not perceptual color distance. Applying a suggestion makes that layer solid. With translucent text, choose a text replacement because a background change would alter both visible colors.
- Palette and vision previews
- Enter up to 12 distinct solid colors, separated by lines, commas or semicolons. Rows are foregrounds, columns are backgrounds, and each pair shows the ratio and AA normal-text verdict. Select a pair to inspect all levels. Protanopia, deuteranopia and tritanopia previews use Machado, Oliveira and Fernandes (2009) at full severity, with BSD-licensed Colour Science matrices. These approximate perception and do not change the WCAG calculation or diagnose anyone.
Questions before you start
Check your business in AI answers
Technical checks help you repair a page. The free AI visibility scan shows the answers checked for your business and what to work on next.