Example Data Table
| Foreground |
Background |
Ratio |
Normal Text AA |
Large Text AA |
Common Use |
| #000000 |
#FFFFFF |
21.00:1 |
Pass |
Pass |
Body copy |
| #777777 |
#FFFFFF |
4.48:1 |
Fail |
Pass |
Muted labels |
| #0A58CA |
#FFFFFF |
6.44:1 |
Pass |
Pass |
Links |
| #FFFFFF |
#198754 |
4.53:1 |
Pass |
Pass |
Buttons |
Formula Used
The calculator first converts each sRGB color channel into a linear value.
If the channel value is 0.04045 or lower, it divides by 12.92. Otherwise, it uses the power formula.
Linear channel: ((channel + 0.055) / 1.055) ^ 2.4
Relative luminance: 0.2126 × R + 0.7152 × G + 0.0722 × B
Contrast ratio: (lighter luminance + 0.05) / (darker luminance + 0.05)
The final score ranges from 1:1 to 21:1.
How To Use This Calculator
Enter the foreground color used for text, icons, or controls.
Enter the background color behind that element.
Add the real text size and weight.
Select a target use case, or keep auto detection enabled.
Press calculate to see the result below the header and above the form.
Use CSV for spreadsheets. Use PDF for a simple project report.
Understanding Color Contrast
Color contrast shows how clearly text stands apart from its background. Strong contrast helps people read faster. It also helps visitors with low vision, glare, tired eyes, or dim screens. A contrast tool gives a numeric score, so design choices become easier to defend.
Why Contrast Matters
A beautiful layout can still fail when text is too close to the page color. Pale gray text on white may look soft, yet it can be hard to read. Bright text on bright backgrounds can cause the same problem. This calculator checks the ratio before a page is published. It reduces guesswork and supports better content decisions.
What The Score Means
The ratio compares the relative brightness of two colors. A value of 1:1 means the colors have no useful separation. A value of 21:1 is the strongest possible contrast between black and white. Higher ratios are usually safer for long paragraphs. Large headings can pass with lower ratios because their shape is easier to see.
Practical Design Use
Use the foreground field for text, icons, borders, or controls. Use the background field for the surface behind that element. Enter hex values from a style guide, page builder, design file, or browser picker. Then choose the size and weight that match the real text. The result shows several pass levels, not just one answer.
Better Workflow
Designers can test brand colors early. Writers can check callout boxes before publishing. Developers can confirm button labels during page builds. The CSV export is useful for audits. The PDF export gives a simple record for clients, teams, or compliance notes.
Common Mistakes
Do not test a color against the wrong surface. A button label should be compared with the button fill, not the page background. Do not rely on screenshots alone. Compression and display settings can change appearance. Always test the actual hex values. Recheck contrast after hover states, disabled states, and dark sections change.
Final Notes
Good contrast does not remove creativity. It creates a safe base for creative work. Start with readable pairs, then refine spacing, weight, and hierarchy. Clear text keeps users moving, trusting, and returning. Small checks prevent large readability problems later for every published page online today.
FAQs
What is color contrast?
Color contrast is the visual difference between foreground and background colors. It helps show whether text, icons, or controls are easy to see.
What is a good contrast ratio?
For many normal text uses, 4.5:1 is a common target. Large text and non-text elements often use 3:1 as a practical minimum.
Can I test button text?
Yes. Enter the button label color as the foreground. Enter the button fill color as the background. Then check the pass result.
Does font size affect the result?
The ratio itself does not change. The pass target changes because larger or bold text can remain readable at lower contrast levels.
What hex format can I enter?
You can enter six-digit hex values like #336699. Three-digit values like #369 are also accepted and expanded automatically.
Why does gray text often fail?
Gray text can sit too close to white or light backgrounds. The visual separation becomes weak, especially on small body copy.
What does luminance mean?
Luminance estimates the relative brightness of a color after converting red, green, and blue channels into linear light values.
Why export CSV or PDF?
CSV helps with audits and spreadsheets. PDF gives a simple report that can be shared with clients, designers, or project teams.