WCAG Color Name Finder
Find accessible text colours that pass WCAG AA/AAA against any background colour. Enter any HEX background, browse 250+ named colours from CSS, X11, and Pantone databases, and see each colour's exact contrast ratio with its compliance level (AAA, AA, AA Large, or Fail). Click any colour to copy its HEX value. Fully private, 100% free, and no signup required.
Background Colour
Background: #1E3A5F
143 accessible colours found
Colours (285 total)
Showing top 50 resultsClick any colour to copy its HEX value. Colours are sorted by contrast ratio (highest first). Greyed-out colours fail WCAG AA for this background.
Why Use Our WCAG Color Name Finder?
Instant WCAG Compliance Check
The WCAG Color Name Finder evaluates 250+ named colours against your background on every keystroke. Each colour displays its exact WCAG contrast ratio and compliance level (AAA, AA, AA Large, or Fail) - no button to press, no page reload needed.
250+ Named Colours from 3 Sources
Includes all 148 CSS named colours, 50+ extended X11 colour names, and 80+ Pantone approximations - giving you the widest possible palette of accessible text colours to choose from for any background colour.
100% Private - No Upload
All contrast calculations happen locally in your browser. Your colour values never leave your device and are never sent to any server - safe for client projects and proprietary brand systems.
Free & No Limits
Check unlimited background colours with no signup, no subscription, and no usage caps. The WCAG Color Name Finder is completely free forever with no ads blocking the interface.
Common Use Cases for WCAG Color Name Finder
Accessible Frontend Development
Frontend developers use the WCAG Color Name Finder to choose text colours that meet accessibility requirements. Enter your design background colour and instantly see which CSS named colours pass WCAG AA or AAA - then copy the HEX value directly into your stylesheet.
WCAG AA/AAA Compliance Auditing
Accessibility auditors use the WCAG Color Name Finder to quickly identify accessible text colour alternatives for any background. The colour-coded pass/fail badges and contrast ratio display make it easy to verify that text colour choices meet legal accessibility standards.
Design System Colour Token Selection
Design system maintainers use the WCAG Color Name Finder to validate text colour tokens. By testing each token against all background tokens, they can document which combinations pass WCAG AA/AAA and which require alternative token values for accessibility.
Mobile App Accessibility
Mobile app developers use the WCAG Color Name Finder to choose text colours for iOS and Android apps. The tool works with any HEX background colour - simply enter your app background and browse accessible colour names with their exact contrast ratios.
Low Vision Accessibility Testing
Designers testing for low vision accessibility use the WCAG Color Name Finder to verify their colour choices meet enhanced (AAA) contrast requirements. The AAA filter mode shows only the most contrasting colours, suitable for users with moderate visual impairments.
Web Content & Email Design
Web content creators and email designers use the WCAG Color Name Finder to ensure their text is readable against various background colours. With 250+ named colours from multiple sources, it provides more accessible options than guessing colour values manually.
Understanding WCAG Colour Accessibility
What is WCAG Colour Contrast?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by users with visual impairments, including low vision and colour vision deficiency. The WCAG Color Name Finder helps you identify which named colours (from CSS, X11, and Pantone sources) provide sufficient contrast against any background colour. The contrast ratio is calculated using the WCAG 2.1 relative luminance formula, producing a value between 1:1 (no contrast) and 21:1 (maximum - black on white).
How Our WCAG Color Name Finder Works
- Enter your background colour: Type a HEX value (e.g.
#1E3A5F) or use the colour picker to select a colour visually. You can also click one of the 16 background presets (White, Black, Navy, Beige, etc.) for quick testing. All processing runs locally in your browser - your colour data never leaves your device. - Browse accessible colours: The tool instantly evaluates all 250+ named colours from our database against your background. Each colour displays its contrast ratio, a compliance badge (AAA, AA, AA Large, or Fail), and a visual preview showing the colour against your background. Use the filter tabs to show only AA+ or AAA-compliant colours.
- Copy any colour: Click any colour card to copy its HEX value to your clipboard. Colours are sorted by contrast ratio (highest first), making it easy to quickly find the most contrasting text colour for your design.
WCAG Contrast Requirements Explained
- AAA (7:1): Enhanced contrast for normal text. The highest WCAG standard, recommended for users with moderate visual impairments. Only the most contrasting colours pass this level. Ideal for body text on critical reading sections or when designing for accessibility-first experiences.
- AA (4.5:1): Minimum contrast for normal text. This is the legal standard required by most accessibility regulations, including Section 508 and the ADA. All body text under 18pt (or 14pt bold) must meet this level. This is the most commonly targeted WCAG level for web content.
- AA Large (3:1): Minimum contrast for large text (≥18pt or ≥14pt bold) and UI components. This also applies to non-text elements like icons, borders, and graphical objects per WCAG 2.1 Success Criterion 1.4.11.
- Fail (<3:1): Does not meet any WCAG text contrast requirement. Colours at this level should not be used for text or essential UI elements against this background. Consider using them for decorative purposes only.
How We Calculate Contrast Ratios
Our WCAG Color Name Finderuses the standard WCAG 2.1 relative luminance formula, which accounts for the human eye’s varying sensitivity to different wavelengths of light. The formula first converts each colour to its linear sRGB components, then applies the standard luminance weights (red: 0.2126, green: 0.7152, blue: 0.0722). The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour’s luminance and L2 is the darker colour’s luminance. This gives a mathematically precise measurement of perceived contrast, ranging from 1:1 (identical colours) to 21:1 (black vs white).
Related Color Tools
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components with live preview.
Color Name Finder
Enter any HEX or RGB colour and instantly find the closest named color from 300+ CSS, X11, and Pantone colour names.
CSS Named Colors Reference
Search, filter, and copy all 148 CSS named colours with HEX, RGB, and HSL values. Filter by 12 colour families.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual colour difference (ΔE 2000 / CIEDE2000) between any two colours with a CIE L*a*b* breakdown.
Frequently Asked Questions About WCAG Color Name Finder
A WCAG Color Name Finder is an accessibility tool that helps you find named text colours (from CSS, X11, and Pantone colour databases) that meet WCAG 2.1 contrast requirements against any background colour. Our WCAG Color Name Finder evaluates 250+ named colours and shows each one's contrast ratio, compliance level (AAA, AA, AA Large, or Fail), and a visual preview - making it easy to choose accessible text colours for your designs.
Enter the HEX value of your background colour (e.g., #1E3A5F) into the input field, or use the colour picker to select one visually. You can also click any background preset for quick testing. The WCAG Color Name Finder instantly evaluates all 250+ named colours and displays them sorted by contrast ratio, with clear compliance badges. Click any colour card to copy its HEX value.
The WCAG Color Name Finder checks all three WCAG 2.1 text contrast levels: AAA (7:1 ratio - enhanced contrast), AA (4.5:1 ratio - standard minimum), and AA Large (3:1 ratio - for large text and UI components). Use the filter tabs to show only AA+ or AAA compliant colours. Colours that fail all levels are shown at the bottom with reduced opacity.
Yes. All contrast calculations happen 100% client-side in your browser using JavaScript. Your colour values are never sent to any server, never stored, and never transmitted anywhere. The WCAG Color Name Finder is completely private and processes everything locally on your device - safe for proprietary brand systems and client projects.
The WCAG Color Name Finder includes three colour databases: all 148 CSS named colours (the standard web colour keywords like "coral", "rebeccapurple", "dodgerblue"), 50+ extended X11 colour names (like "cerulean", "terracotta", "emerald"), and 80+ Pantone approximations (like "Pantone Warm Red", "Pantone 186"). This gives you over 250 named colour options for every background.
Yes. The WCAG Color Name Finder is 100% free with no signup required, no premium features, and no usage limits. Check unlimited background colours against all 250+ named colours without any restrictions or hidden costs.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This is the legal standard required by most accessibility laws. WCAG AAA requires a higher ratio of at least 7:1 for normal text and 4.5:1 for large text. AAA is an enhanced standard that provides better readability for users with moderate visual impairments but may not be achievable for all design choices.
Yes, all CSS named colours (148 of them) can be used directly in CSS by their name - e.g., color: dodgerblue or color: rebeccapurple. For X11 and Pantone colours, you should use their HEX values in your CSS. The WCAG Color Name Finder shows both the colour name and the HEX value, so you can easily copy the format that works best for your code.