Color Contrast Checker
Check contrast ratio between text and background colors and WCAG AA readability standard compliance instantly
Features
Instant contrast ratio assessment
Display WCAG AA compliance by entering text and background colors
Color picker and code input
Specify colors by pasting HEX, shorthand, rgb() format or using color selection
Two-size sample display
Preview actual appearance of normal and heading text in real time
One-click passing colors
Apply suggested colors that maintain hue while adjusting brightness for compliance
How to Use
Specify text color
Select with color picker or enter color code in #333333, #333, or rgb(51, 51, 51) format
Specify background color
Specify background color the same way. Results update automatically as you type without clicking
Check ratio, compliance, and samples
Review contrast ratio, normal and large text compliance, one-word rating, and sample text appearance
Apply suggested colors and re-check
If non-compliant, apply passing colors with suggestion buttons like "Change text color to ...". Swap button lets you exchange text and background colors
Use Cases
Verify slide and document colors
Confirm text and background colors are readable in internal documents and slides before creation
Check website color scheme
Verify site and banner colors meet accessibility standards (WCAG AA)
Determine brand color for body text
Decide how dark brand colors need to be when using them for body text
Fix non-compliant colors
Correct flagged color schemes to compliant colors while preserving hue
Knowledge Base
What is contrast ratio
Contrast ratio is a metric expressing the brightness difference between text and background colors on a scale from 1:1 to 21:1. Black and white combinations reach the maximum 21:1, while identical colors produce the minimum 1:1.
- How it's calculated：Contrast ratio is calculated by converting two colors to sRGB relative luminance, adding 0.05 to each brightness value, then dividing the lighter by the darker.
- Numerical reference：Against a white background (#FFFFFF), gray #777777 produces 4.47:1 contrast, #999999 produces 2.84:1, and black (#000000) produces 21:1.
Difference between WCAG AA and AAA
WCAG is an international guideline for web content accessibility, defining contrast ratio compliance thresholds at two levels: AA and AAA.
- AA (standard level)：AA requires 4.5:1 or higher for normal text and 3.0:1 or higher for large text, representing the level most websites aim for.
- AAA (stricter level)：AAA requires 7:1 or higher for normal text and 4.5:1 or higher for large text, aiming for readability for people with low vision.
Definition of large text
WCAG defines large text as approximately 18pt (24px) or larger, or bold text at 14pt (approximately 18.7px) or larger.
- Normal text：Normal text is text that doesn't meet large text criteria, such as body copy or footnotes, requiring a contrast ratio of 4.5:1 or higher.
- Relationship with headings：Headings under 24px that aren't bold are treated as normal text, so both size and weight need to be verified.
Safety and Privacy
Runs entirely in your browser
Your input data is processed only within your browser and is never sent externally.
Processing only in your browser
Contrast ratio calculation and color suggestions is processed entirely within your browser, and input data is not sent to any server.
Communications encrypted with HTTPS
Page loading is also encrypted by TLS, and content cannot be read by third parties.
No transmission to third parties
Input content is not sent to external services such as ad networks or trackers.
No automatic saving of results
Input text and background colors and input suggestions are not stored on the server.
Follow RAKKOTOOLS on Google Search
194 useful tools become easier to find from Google Search and AI Search!
- Found in search
- Also shown in AI Search
- Discover new tools
Updates
- update #337
Add color contrast checker to assess readability between text and background colors