Color Contrast Ratio Calculator
RGB Contrast Check
Check contrast ratio between two RGB colors
Common Color Combinations
Check contrast for common color pairs
Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) | Relative Luminance L = 0.2126×R + 0.7152×G + 0.0722×B (linearized sRGB)
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively.
What counts as large text in WCAG?
Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold weight and above. Large text has a lower contrast requirement (3:1 for AA) because it is easier to read.
How is contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 is the darker. Luminance is calculated from sRGB values using the formula: L = 0.2126R + 0.7152G + 0.0722B (after gamma correction).
You may also need
R
Color Converter
Free color converter. Convert between HEX, RGB, and HSL color formats. Preview colors and get CSS values.
Conversion~
Typography Scale Calculator
Free typography scale calculator. Generate harmonious font size scales using musical ratios, golden ratio, and custom ratios for web and print design.
Everyday~
Design Grid Calculator
Free design grid calculator. Calculate column widths, gutters, and margins for responsive web layouts and print design grids.
Everyday