Contrast Checker
Check color contrast ratios for accessibility compliance (WCAG)
Preset Combinations
WCAG Guidelines
AAA: Enhanced level - 7:1 for normal text, 4.5:1 for large text
AA: Standard level - 4.5:1 for normal text, 3:1 for large text
Large text: 18px or larger, or 14px or larger if bold
Complete Contrast Checker Guide
Contrast Checker is an essential accessibility design tool for designers and developers. Checks whether contrast between foreground color (text) and background color meets WCAG (Web Content Accessibility Guidelines) standards. Supports real-time contrast ratio calculation, automatically evaluates AAA, AA, A levels, provides compliance checks for normal text and large text. Includes preset color combinations, supports color swapping and copying. Whether for web design, UI design, or mobile app development, you can ensure color contrast meets accessibility standards, allowing all users (including visually impaired users) to easily read content. Tool is completely free, based on WCAG 2.1 standards, all operations done locally in browser.
1如何使用 / How to Use
Step 1: Select Foreground and Background Colors
Select foreground color (text color) and background color to check. Can click color picker to select intuitively, or enter HEX value in input field (like #000000). Foreground color is usually color of text, icons, buttons, background color is color of area they are in. Ensure correct HEX format input (6-digit hexadecimal). Can click copy button to quickly copy color value.
Step 2: View Contrast Ratio
Tool automatically calculates and displays contrast ratio (like 4.5:1). Higher contrast ratio makes text easier to read. Ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black-white). Also displays WCAG level (AAA, AA, A or Fail), marked with different colors: green for AAA (best), blue for AA (good), yellow for A (only large text passes), red for Fail (not compliant).
Step 3: Check Text Compliance
View compliance check results for normal text and large text. Normal text (14px or smaller) requires at least 4.5:1 contrast ratio (AA level). Large text (18px or larger, or 14px bold) requires at least 3:1 contrast ratio (AA level). Green checkmark indicates pass, red warning indicates fail. If fails, need to adjust colors to improve contrast. AAA level requires higher: normal text 7:1, large text 4.5:1.
Step 4: Preview Actual Effect
View actual text display effect in preview area. Shows three font sizes: normal text (14px), large text (18px bold), small text (12px). Can intuitively judge whether text is clear and readable. If text is hard to read or looks blurry, indicates insufficient contrast, need to adjust colors. Preview area uses actual foreground and background colors, ensuring WYSIWYG.
Step 5: Use Preset Combinations or Adjust Colors
Can click preset color combinations to quickly test common color schemes. Each preset shows contrast ratio and WCAG level. If current colors not compliant, can: 1) Increase brightness difference between foreground and background; 2) Use darker foreground or lighter background; 3) Click "Swap Colors" button to try inverting; 4) Refer to compliant color schemes in preset combinations. View contrast changes in real-time after adjustment, until target level is reached.
2实际应用场景 / Use Cases
1Web Accessibility Design
Ensure website meets accessibility standards, allowing all users to access. Check color contrast of body text, headings, links, buttons. Ensure at least AA level (4.5:1), preferably AAA level (7:1). Pay special attention to light text on light background, dark text on dark background, these easily fail. Check colors in different states (normal, hover, active, disabled). Meeting WCAG standards not only helps visually impaired users, but also improves reading experience for all users.
2UI Interface Design
Design interface meeting accessibility standards for mobile apps or desktop software. Check contrast of all text elements: navigation bar, labels, form labels, input field text, error prompts, success messages. Ensure icons and buttons have sufficient contrast with background. Check contrast separately for dark mode and light mode. Follow platform accessibility guidelines (iOS, Android, Windows). Insufficient contrast may cause app review rejection, affect user experience.
3Brand Color Accessibility Optimization
Optimize brand colors to meet accessibility standards. Brand primary color may not meet contrast requirements, need to create variants. Check contrast of brand primary color on white and black backgrounds. If not compliant, create darker or lighter variants for text. Keep original brand color for decorative elements (without text). Record contrast ratios of all variants, establish accessible color system. Ensure brand recognition while meeting accessibility requirements.
4Forms and Input Controls
Ensure readability and accessibility of form elements. Check contrast of form labels, input field text, placeholder text, help text. Input field borders and backgrounds also need sufficient contrast. Check contrast of error state (red), success state (green), warning state (yellow). Disabled state elements can have slightly lower contrast, but still need to be recognizable. Ensure required field markers (*) are clearly visible. Forms are key to user interaction, insufficient contrast causes filling errors.
5Data Visualization
Ensure accessibility of charts and data displays. Check contrast of chart titles, axis labels, legend text. Data labels and numerical displays need to be clearly readable. Avoid using only color to distinguish data (consider colorblind users), add patterns or labels. Check color contrast of different data series. Contrast of tooltips and hover information also important. Ensure clear reading on different devices and ambient light. Accessible data visualization allows all users to understand data.
6Print and Document Design
Ensure readability of print materials and PDF documents. Check contrast of body text, headings, footnotes. Colors may lighten when printing, need higher contrast. In black-white printing, colored text may become gray, need to ensure grayscale contrast. Check if watermarks, background patterns affect text readability. PDF documents need to meet PDF/UA accessibility standards. Ensure clear reading on different printers and paper.
使用技巧与最佳实践 / Tips & Best Practices
Understand WCAG Levels
WCAG defines three levels. AA level (standard level): normal text 4.5:1, large text 3:1, minimum requirement for most websites and apps. AAA level (enhanced level): normal text 7:1, large text 4.5:1, provides best accessibility, recommended for important content. A level: only large text reaches 3:1, not recommended. Fail: does not meet any standards, must be modified. Laws and regulations (like ADA, Section 508) usually require at least AA level.
Methods to Improve Contrast
If contrast insufficient, can: 1) Use darker foreground color (text color); 2) Use lighter background color; 3) Adjust both foreground and background colors simultaneously, increase brightness difference; 4) Avoid using similar colors (like light gray on white); 5) Use pure black (#000000) or pure white (#FFFFFF) as baseline; 6) Add shadow or stroke to text (but not recommended, affects aesthetics). Simplest method: black text on white background (21:1), or white text on black background (21:1).
Definition of Large Text
WCAG defines large text as: 18px or larger regular text, or 14px or larger bold text. Large text has lower contrast requirement (3:1 vs 4.5:1), because easier to read. Note: This refers to actual rendered font size, not font-size in CSS. Consider user zoom and device pixel ratio. Headings usually large text, body text usually normal text. If unsure, checking by normal text standard (4.5:1) is safer.
Colorblind-Friendly Design
Contrast checker mainly checks brightness contrast, but also consider colorblind users. Do not use only color to convey information (like red for error, green for success), add icons or text descriptions. Avoid using red-green combinations (red-green colorblindness most common). Use contrast checker to ensure elements distinguishable even in grayscale mode. Testing tools: Use colorblind simulators (like Coblis, Color Oracle) to view design effects. High contrast design helps all types of colorblind users.
Test Different Scenarios
Test contrast in different scenarios. Different devices: phone, tablet, computer, projector, screen brightness and color display differ. Different environments: indoor, outdoor, bright, dim, ambient light affects readability. Different users: young people, elderly, visually impaired users, vision varies greatly. Different browsers and operating systems: color rendering may differ slightly. Recommendation: Test in actual usage environment, seek feedback from real users. Contrast checker provides objective standards, but subjective testing equally important.
常见问题 / Frequently Asked Questions
技术说明 / Technical Details
This tool implements color contrast checking based on WCAG 2.1 standards. **Core Features**: 1. Real-time contrast calculation 2. WCAG level evaluation (AAA, AA, A, Fail) 3. Normal text and large text compliance checks 4. Actual effect preview 5. Preset color combinations 6. Color swapping and copying 7. Detailed WCAG guidance **Technical Implementation**: - Uses WCAG 2.1 defined relative luminance formula - Calculates based on sRGB color space - Considers human eye sensitivity to different colors - Green weight: 0.7152 - Red weight: 0.2126 - Blue weight: 0.0722 **Contrast Calculation Formula**: 1. Convert HEX color to RGB (0-255) 2. Normalize RGB to 0-1 range 3. Apply gamma correction (linearization) 4. Calculate relative luminance: L = 0.2126 * R + 0.7152 * G + 0.0722 * B 5. Calculate contrast ratio: (L1 + 0.05) / (L2 + 0.05) **WCAG Standards**: - AA level normal text: ≥ 4.5:1 - AA level large text: ≥ 3:1 - AAA level normal text: ≥ 7:1 - AAA level large text: ≥ 4.5:1 - Large text definition: ≥ 18px or ≥ 14px bold **Level Evaluation Logic**: - AAA: Both normal text and large text meet AAA standards - AA: Both normal text and large text meet AA standards - A: Only large text meets AA standards - Fail: Does not meet any standards **Privacy Protection**: All contrast calculations done locally in browser, no data sent to servers. Does not store any input color values. Fully protects your privacy. **Tech Stack**: Next.js + React + TypeScript + WCAG 2.1 standard algorithms, ensuring accuracy and compliance.
🔒 隐私保护承诺 / Privacy Protection
所有处理都在您的浏览器本地完成，数据不会上传到任何服务器。您的隐私和数据安全是我们的首要任务。
All processing is done locally in your browser. No data is uploaded to any server. Your privacy and data security are our top priorities.