Color Contrast Checker

In web and app design, the contrast ratio between text and background is one of the most fundamental aspects of accessibility. WCAG 2.1 (Web Content Accessibility Guidelines) is an international accessibility standard with two conformance levels: AA and AAA. For normal text (less than 14pt), AA requires 4.5:1 contrast and AAA requires 7:1. For large text (18pt or larger), AA requires 3:1 and AAA requires 4.5:1. UI components and graphics must meet a minimum 3:1 contrast ratio.

This tool automatically calculates contrast ratios from just two color inputs and clearly shows whether each AA/AAA level is met for normal text, large text, and UI components. It supports three color code formats—HEX (#FF0000), RGB (rgb(255,0,0)), and HSL (hsl(0,100%,50%))—providing seamless integration with design tools, Figma, CSS files, and other workflows. The built-in browser color picker offers intuitive visual color selection.

When contrast falls short of standards, the tool automatically generates improvement suggestions such as darker foreground colors or lighter backgrounds. A swap button lets you quickly exchange foreground and background colors, and real-time preview shows exactly how the combination looks as you adjust. All processing happens locally in the browser, ensuring your design data and color information remain completely private.