Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.
Contrast Ratio
12.3:1
WCAG 2.1 AA
WCAG 2.1 AAA
This is a sample text used to test color readability. Proper contrast helps everyone read web content easily.
One-click text color auto-adjustment to meet AA (4.5:1) standards
Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
This color contrast checker calculates the contrast ratio between a text color and a background color using the WCAG 2.1 formula. Each RGB color is converted to relative luminance, then (lighter + 0.05) ÷ (darker + 0.05) gives a ratio from 1:1 to 21:1. Black on white is the maximum, 21:1; identical colors are 1:1. Pick colors with the color picker or type HEX codes, and the preview updates live with sample text and a button.
WCAG level AA requires at least 4.5:1 for normal text and level AAA requires 7:1; large text (18pt, or 14pt bold) relaxes those to 3:1 and 4.5:1. The AA and AAA badges here use the normal-text thresholds. Ratios must not be rounded up: #777777 on white is 4.47:1, which looks close but fails, while #767676 reaches 4.54:1 and passes AA. #595959 on white is about 7.00:1, enough for AAA.
If a pair fails, press Smart Fix. The tool keeps the hue direction and steps the text color lighter (on dark backgrounds) or darker (on light backgrounds) until it reaches the AA ratio of 4.5:1; if that is not possible, it falls back to pure black or white. It is a quick way to find a usable color, though brand colors still deserve a designer’s final touch.
The color blindness simulator lets you upload an image or use the sample and preview it as seen with protanopia, deuteranopia, tritanopia or achromatopsia, using color matrices. It is handy for checking whether charts, maps or status colors rely on hue alone. Images are scaled to fit 800×600 and processed on a canvas in your browser without being uploaded. The simulation is an approximation; real color vision varies from person to person.
Body text needs at least 4.5:1 for WCAG AA and 7:1 for AAA. Large text (18pt or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. Non-text elements such as icons and input borders need at least 3:1 under WCAG 2.1.
WCAG thresholds are strict minimums and cannot be rounded. The checker shows two decimal places and rounds down, so you never see a ratio that looks like 4.5:1 but fails.
It only changes the lightness of the text color; the background stays the same. The result keeps a similar hue, or becomes black or white if nothing else passes. To keep a brand color, adjust the background instead or reserve the original color for large text and decoration.
No. The browser reads the image and applies the color matrix on a canvas, so everything stays on your device. The filters are common approximations, useful for spotting designs that communicate information through color alone.
Browse this category: Design & Color
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
Upload your webpage screenshot, wrap it with a premium macOS browser frame, drop shadows, and beautiful gradient backdrops, and export high-res PNG.
Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code.
