Color Picker

Accepts #RGB or #RRGGBB
Accepts #RGB or #RRGGBB
The quick brown fox jumps over the lazy dog

💡 Tip of the Day

Minify CSS and scripts for performance.

What is Color Picker + WCAG Contrast Checker

Color Picker + WCAG Contrast Checker helps you pick colors and verify readable contrast in seconds. Struggling to tell if your text color meets accessibility standards? The free Color Picker + WCAG Contrast Checker by FlexiTools.io lets you choose foreground and background colors, preview your text, and see pass-or-fail results for WCAG levels. In the next 60 seconds, you can test a pair, view the contrast ratio, copy a clean summary, or export results to CSV.

How to Use Our Color Picker + WCAG Contrast Checker

  1. Choose your colors
  • Set Foreground color and Background color using the color inputs or the HEX text fields. You can copy either HEX with the Copy buttons. Short HEX like #ABC and full HEX like #AABBCC are both supported.
  1. Adjust the preview
  • Edit the Preview text, switch Preview size between Normal text and Large text, and toggle Bold preview to reflect your design. The preview updates instantly.
  1. Check contrast
  • Click Check contrast or press Enter. You’ll see the contrast ratio and clear pass-or-fail badges for AA and AAA - normal and large text.
  1. Copy or export results
  • Use Copy summary to grab a one-line report. Click Download CSV to save foreground, background, ratio, and pass-or-fail columns for AA normal, AAA normal, AA large, and AAA large. Want to test the inverse? Hit Swap. Need a fresh start? Click Clear.

Why FlexiTools.io Offers the Best Color Picker + WCAG Contrast Checker

Instant results on your device

Everything runs in your browser, so color checks are fast and private.

WCAG clarity at a glance

The tool shows the contrast ratio and pass-or-fail badges for AA and AAA - normal and large text - so you know exactly where you stand.

Copy and export without friction

Copy foreground and background HEX, grab a single-line summary, or export a CSV for reviews and audit trails.

Accurate, readable preview

Preview live text with normal or large sizing and a bold toggle to match real-world UI and content use.

FlexiTools.io vs typical alternatives

  • FlexiTools.io: Local checks and instant feedback - Alternatives: Slower or multi-step workflows
  • FlexiTools.io: Copy summary + CSV export - Alternatives: No easy export
  • FlexiTools.io: Swap, Clear, and live preview controls - Alternatives: Minimal preview options
  • FlexiTools.io: Accepts #RGB and #RRGGBB HEX - Alternatives: Unclear input rules

A Deeper Look at Accessible Color Contrast

What WCAG contrast levels mean

WCAG contrast guidance exists to help more people comfortably read text. The two main thresholds are AA and AAA. For normal text, AA requires a ratio of at least 4.5:1 and AAA requires at least 7:1. Large text has slightly lower thresholds - 3:1 for AA and 4.5:1 for AAA. Large text generally means 18pt or 14pt bold - the interface labels this as Large text to make it simple.

If you are designing buttons, labels, or paragraphs, aim for AA at minimum. AAA is stricter and can be harder to meet with brand colors, but it is a good target where legibility is critical. Not sure whether your heading counts as large text? If the text is truly large or bold enough, you may be able to use the large-text thresholds - otherwise stick to normal-text thresholds.

How contrast ratio is calculated

The tool computes contrast ratio using the standard formula based on relative luminance. First it converts each color from sRGB to linear light, then calculates luminance with the weighted RGB components. Finally, it applies the ratio (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker color. This approach aligns with the W3C’s guidance for contrast (minimum) and the luminance model defined by the W3C relative luminance definition.

HEX values are read in sRGB. The tool accepts #RGB and #RRGGBB, normalizes them to 6-digit HEX, and applies the proper transfer function when computing luminance. Want a refresher on color formats and sRGB behavior in the browser? MDN’s pages on CSS color values provide helpful background.

Why small changes can have a big effect

Often a tiny tweak lifts a pair from fail to pass. Darkening the foreground slightly or lightening the background a hair can move a ratio from 4.4:1 to 4.6:1 - enough to clear AA for normal text. This is why the live preview matters. You can test colors quickly, see the ratio, and decide whether the visual trade-off is acceptable.

Brand colors are a common hurdle. You may keep the brand hue but adjust brightness in text elements to raise contrast. Another pattern is placing brand colors in backgrounds or accents while using a tested neutral for text.

Normal vs large text - which threshold applies?

Large text thresholds exist because larger, heavier glyphs are easier to read at lower contrast. That said, do not stretch the definition. Body copy, labels, and small UI elements should be evaluated as normal text. Reserve the large-text thresholds for headings or genuinely bigger, bold elements. Our control for preview size helps you check both quickly.

A quick example you can try

Suppose your foreground is #1A1A1A and background is #FFFFFF. Click Check contrast - you will see a high ratio and passes across AA and AAA. Now try #666666 on #FFFFFF. You will likely pass AA for normal text but fall short of AAA. Want to see how bold, large headings change things? Switch Preview size to Large text and toggle Bold preview, then check again. Which combinations feel right and still pass the target level?

Why a CSV export helps teams

Color checks often end up in design reviews, accessibility audits, or QA notes. The CSV export includes the foreground and background HEX, the exact contrast ratio, and pass-or-fail flags for AA normal, AAA normal, AA large, and AAA large. It’s a compact record you can attach to tickets or share with teammates who need a documented baseline. Need to explore alternates? Swap the colors or tweak one value and re-check - you can download a new CSV in seconds.

Pro-Tips for Getting the Most Out of Contrast Checks

  • Test the exact text you ship - headings, labels, and paragraph copy often behave differently. Use the preview size and bold toggle to mirror your design.
  • When a pair almost passes, adjust brightness before changing hue - small shifts often produce a clear pass with minimal visual impact.
  • Save time with Copy summary for quick notes and Download CSV when you need an auditable record - both reflect the current check.
Which color formats does the tool accept?
Enter colors as HEX in #RGB or #RRGGBB form, or use the built-in color inputs. The tool normalizes short HEX to full HEX. Alpha channels and named colors are not used in the contrast math.
What do AA and AAA mean for normal and large text?
AA and AAA are WCAG thresholds for readable contrast. Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA. Large text typically means 18pt regular or 14pt bold.
Can I copy results or export them?
Yes. You can copy the foreground or background HEX, or use Copy summary to grab a one-line report. Download CSV exports columns for foreground, background, contrast_ratio, and pass-or-fail flags for AA normal, AAA normal, AA large, and AAA large.
Does this check non-text contrast or images?
This tool evaluates text color against background color using the standard text contrast method. Non-text elements like icons or thin strokes can have different considerations. For those, aim for strong contrast and test at the visual size used in your UI.
Does anything leave my browser?
No. The tool runs locally in your browser. Your colors, preview text, and results are handled on your device. You can clear the session anytime with the Clear button.