ColorCheckerColorContrast

RGB Color Contrast Checker

Working with RGB values? Check your rgb(r,g,b) colors against WCAG contrast standards. Learn how RGB channels affect luminance and get instant AA/AAA compliance results with AI-powered suggestions.

How to Check RGB Colors

1. Grab your RGB values from a design tool (Figma, Sketch, Photoshop), browser DevTools, or an rgb(255, 255, 255) CSS declaration.

2. Use the color picker or type hex codes — the RGB breakdown appears in the results panel, showing each channel's contribution to luminance (red = 0.2126, green = 0.7152, blue = 0.0722).

3. Green has the strongest impact on luminance. If your RGB combination fails, adjusting the green channel makes the biggest difference. Our alternative suggestions find passing colors automatically.

Why RGB Matters for Color Contrast

RGB is the native color space of screens — every pixel on your display is physically composed of red, green, and blue subpixels. Design tools, operating system color pickers, and CSS all use RGB (or its hex equivalent) as the primary color format.

When calculating contrast, WCAG uses the relative luminance formula: L = 0.2126×R + 0.7152×G + 0.0722×B. Notice green's massive weight — it contributes over 71% of perceived brightness. This is why dark green text on a white background often passes AA, while dark blue at the same intensity fails.

Understanding RGB helps you debug contrast failures: a color with low green-channel values will appear dark regardless of its red or blue components, making it suitable as a foreground on light backgrounds. Use the per-channel breakdown in our results panel to see exactly how each color contributes.

Contrast Ratio

12.6:1
AA Normal
AA Large
AAA Normal
AAA Large

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.

Contact Us

Frequently Asked Questions

How do I check RGB colors with this tool?
While our hex input uses # notation, you can easily convert RGB to hex: each RGB channel (0-255) converts to a 2-digit hex value. For example, rgb(51, 51, 51) = #333333. Our tool also accepts colors via the native color picker which shows both hex and RGB values.
How does RGB relate to contrast ratio calculations?
WCAG contrast is calculated from RGB values through a process called 'relative luminance.' Each RGB channel (0-255) is divided by 255, linearized with a gamma correction, then combined: Luminance = 0.2126×R + 0.7152×G + 0.0722×B. The green channel dominates because human eyes are most sensitive to green light.
What RGB values give the best contrast on white?
For maximum contrast on white (#FFFFFF), use RGB values as dark as possible: (0,0,0) gives 21:1 contrast. To meet WCAG AA (4.5:1), the highest acceptable RGB values on white are approximately (117, 117, 117) which is a medium gray (#757575). Anything lighter will fail.
Why is the green channel weighted so heavily in luminance?
Human eyes evolved to be most sensitive to green wavelengths — it's why night vision goggles display in green and why green screens are used in film production. In the WCAG luminance formula, green contributes 71.5%, red 21.3%, and blue just 7.2%. This means adjusting the green channel is the most efficient way to change perceived contrast.
Can I use rgba() with transparency for contrast checking?
RGBA transparency complicates contrast because the final rendered color depends on what's behind the element. Our tool checks the final opaque color — if you're using rgba(), compute the resulting opaque RGB by blending it against the background first, then check that blended color. As a rule of thumb, avoid relying on transparency for text that needs to meet WCAG thresholds.

Related Tools

HEX Contrast CheckerHSL Contrast CheckerImage Contrast CheckerText Contrast Checker