Luma / Brightness Checker

The Luma Checker helps designers and developers ensure text readability by calculating the contrast ratio between foreground and background colors. It uses the latest WCAG 2.2 formulas and supports both solid colors and images. All processing is done locally in your browser your colors never leave your device.

All calculations run locally on your device for maximum speed.

Your color choices and uploaded images never leave your device.

Luma is the perceived brightness of a color, weighted by human eye sensitivity (green contributes most, blue least). The WCAG contrast ratio formula uses relative luminance, which is derived from sRGB values. For accessibility, WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text, and WCAG AAA requires 7:1. Large text (18px+ bold or 24px+ regular) can meet AA at 3:1.

Our tool computes the exact ratio and clearly shows whether your combination passes AA and AAA. You can even test against image backgrounds the tool extracts the average color to provide accurate results.

Checking color contrast and luminance is a critical step in building accessible, WCAG-compliant interfaces. After verifying your color combinations pass contrast requirements, use our CSS glassmorphism generator carefully — frosted glass effects reduce effective contrast and need to be tested with this tool to ensure text remains legible over blurred backgrounds. For design systems that store color tokens as JSON, our JSON formatter validates your token configuration files cleanly.

When you need to extract the dominant colors from a reference image to test them for contrast, use our image color palette generator to get the exact hex codes. Our CSS minifier compresses the stylesheets where your validated color combinations are defined. For encoding color values into URL parameters for design tool integrations, our URL encoder handles percent-encoding. The diff checker is useful for comparing two versions of a design token file to see which color values changed. Our Base64 encoder converts design asset data for inline CSS embedding, and our SVG path visualizer helps you build the icon shapes used in your accessible UI components.