Contrast Ratio Calculator

Color contrast describes the difference in relative luminance between a foreground and background. Adequate contrast helps people with low vision, color-vision differences, aging eyes, glare, or low-quality displays read and operate digital interfaces. This contrast ratio calculator converts two HEX or RGB colors to the relative-luminance values defined by the Web Content Accessibility Guidelines, then reports a ratio from 1:1 for identical luminance through 21:1 for black against white. The calculation does not simply compare raw red, green, and blue channel values. Each sRGB channel is normalized and linearized to account for display gamma. The linear red, green, and blue values receive luminance weights of 0.2126, 0.7152, and 0.0722 because human vision is most sensitive to green light. The final contrast ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. This standard method produces consistent results regardless of which entered color is listed first. WCAG 2.x success criterion 1.4.3 requires at least 4.5:1 contrast for normal text at level AA and at least 3:1 for large text. Level AAA raises those thresholds to 7:1 and 4.5:1. Large text generally means at least 18 point regular text or 14 point bold text, approximately 24 CSS pixels or 18.66 CSS pixels respectively under common browser assumptions. User-interface components and meaningful graphical objects have separate requirements, commonly 3:1 against adjacent colors. Passing a ratio is important but does not guarantee an accessible design. Thin fonts, unusual typefaces, gradients, images, hover states, transparency, anti-aliasing, and changing backgrounds can alter effective readability. Placeholder text and disabled controls also deserve deliberate review even when a particular criterion treats them differently. Do not communicate status through color alone; pair colors with labels, icons, patterns, or other cues. Test focus indicators and every interactive state, not only the default screenshot. Enter six-digit HEX, three-digit HEX, or standard comma-separated RGB notation. The calculator validates channels from zero through 255 and evaluates the exact colors entered. If the result falls just below a threshold, adjust the foreground darker or the background lighter and calculate again. Automated contrast checking should be followed by keyboard testing, zoom and reflow checks, screen-reader review, and feedback from people with disabilities. Use this tool during design and implementation to catch basic color failures early, then verify the final rendered interface under realistic conditions.