ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರೀಕ್ಷಕ
ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಿಸಿ
ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ · ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ
ಈ ಉಪಕರಣ ಮತ್ತು ಈ ಪುಟದ ಸೂಚನೆಗಳು ಸದ್ಯಕ್ಕೆ ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿವೆ. ಇದು ಅದೇ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ: ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ನಡೆಯುತ್ತದೆ.
Large text: The quick brown fox
Normal text: The quick brown fox jumps over the lazy dog. 0123456789
Button outline| Use | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (below 24 px, or below 18.66 px bold) | ||
| Large text (24 px and up, or 18.66 px bold) | ||
| Icons, borders and form fields | – |
Suggested text colors
The nearest colors with the same hue that pass. Click one to use it.
ಈ ಉಪಕರಣವನ್ನು ಚಲಾಯಿಸಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ ತುಂಬಾ ಹಳೆಯದು. ದಯವಿಟ್ಟು ಅದನ್ನು ನವೀಕರಿಸಿ, ಅಥವಾ Chrome, Edge, Firefox ಅಥವಾ Safari ನ ಪ್ರಸ್ತುತ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಿ.
- ಏನೂ ನಿಮ್ಮ ಸಾಧನವನ್ನು ಬಿಡುವುದಿಲ್ಲ
- ಸರ್ವರ್‌ನಿಂದ ಗಾತ್ರದ ಮಿತಿ ಇಲ್ಲ
- ಸೈನ್-ಅಪ್ ಇಲ್ಲ, ವಾಟರ್‌ಮಾರ್ಕ್ ಇಲ್ಲ
- ಉಚಿತ
How to check color contrast
- Enter the text color and the background color, or pick them.
- Read the contrast ratio and the pass or fail results for normal text, large text and interface parts.
- If it fails, click a suggested color: the nearest shade that passes.
The WCAG requirements
| Use | AA | AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 | 4.5 : 1 |
| Icons, borders, form fields | 3 : 1 | – |
Good to know
- The ratio is calculated with the WCAG 2 formula and compared without rounding, so 4.49 : 1 fails AA.
- See-through text colors are blended with the background first, as browsers draw them.
- Passing the ratio is required but not everything: font weight, size and thin lines also affect readability.
ಪದೇ ಪದೇ ಕೇಳುವ ಪ್ರಶ್ನೆಗಳು
What contrast ratio do I need?
For most text, at least 4.5 : 1 (WCAG AA). Large text needs 3 : 1. AAA asks for 7 : 1.
How are the suggestions made?
The text color keeps its hue and saturation and is made lighter or darker until it reaches the target ratio.
Is this APCA / WCAG 3?
No. It uses WCAG 2.1 and 2.2, which is what most laws and guidelines refer to today.