Accessibility Tool

Luma / Brightness Checker

Check text contrast against backgrounds for WCAG AA & AAA compliance

Contrast Checker

People Also Use These Tools

URL Encoder

Encode and decode URLs

Base64 Encoder

Encode and decode Base64

JSON Formatter

Format and validate JSON

About the 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.

How to Use the Contrast Checker

  1. Choose your Background Type — Solid Color or upload an Image.
  2. Pick a Background Color using the color picker, or upload an image file.
  3. Select a Foreground (Text) Color — this is the color of your text.
  4. Click Check Contrast to instantly see the contrast ratio and WCAG AA/AAA pass/fail results.
Instant Results

All calculations run locally on your device for maximum speed.

100% Private

Your color choices and uploaded images never leave your device.

Understanding Luma and WCAG Contrast

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.

5 Tips for Better Color Contrast in Your Designs

  1. Prioritize high contrast for body text — always aim for at least 4.5:1.
  2. Test with real images — gradients and photos can create tricky contrast spots.
  3. Remember large text is more forgiving — headings and big UI elements can use 3:1.
  4. Check both dark and light themes — your app likely has both modes.
  5. Don't rely solely on color — use icons, underlines, or patterns to convey information.

Frequently Asked Questions

What exactly is Luma?

Luma is the brightness component of a color as perceived by the human eye. It gives a more accurate measure of brightness than simple average RGB because our eyes are more sensitive to green and yellow than blue.

Does this checker support image uploads?

Yes, you can upload any JPEG, PNG, or GIF. The tool will sample the average color of the image to compute the contrast ratio — perfect for testing text over photos.

Is my data safe?

Absolutely. All processing happens in your browser. No color data or images are ever sent to our servers.

Can I use this for mobile app design?

Yes! The tool works on all devices and the contrast ratios apply equally to mobile, tablet, and desktop interfaces.

Related Tools