Mac color contrast checker: test a color pair
Enter the specified foreground and background colors, read the WCAG text result, then repeat the check for every real UI state.
Paste the specified foreground and background hex values into a contrast checker. For WCAG 2.2 text contrast, Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
TeenyTool includes a local Contrast Checker in its Colors category. It accepts three-digit or six-digit hex values, calculates their relative luminance, and reports the ratio plus AA and AAA results for normal and large text. I build TeenyTool; those boundaries were checked against the current Swift source.
Use the ratio as a gate, then inspect the real interface. The current checker does not resolve alpha, images, or gradients and cannot verify focus visibility, color-only meaning, or every interaction state.
Quick decision table
| UI element | First contrast check | Do not stop there |
|---|---|---|
| Body text and labels | Check foreground against the actual background. Normal text should meet 4.5:1 for WCAG AA. | Inspect thin weights, small sizes, placeholder text, and text over images. |
| Large headings | Large text has a lower 3:1 AA threshold. | Confirm it meets WCAG's large-text definition: at least 18 point, or 14 point and bold. |
| Buttons and controls | Check button label text, then check borders and focus indicators separately. | Hover, disabled, selected, and pressed states need their own pass. |
| Icons and chart marks | Use non-text contrast guidance as the starting point. | Do not rely on color alone when shape, label, or state text is needed. |
01What TeenyTool checks
The current Contrast Checker source accepts three-digit or six-digit foreground and background hex values. It expands short hex, converts each color to RGB, linearizes the channels, calculates relative luminance, and reports the contrast ratio as (lighter + 0.05) / (darker + 0.05).
It then marks four thresholds: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1. The UI also shows a small preview with normal and large sample text beside the numeric result.
The parser does not accept four-digit or eight-digit hex with alpha. It also does not composite transparent colors over a background. Resolve the final visible foreground and background colors first, or test the rendered result separately.
02How to run the local check
- Open teenytool from the menu bar.
- Search for "contrast" or open the Colors category.
- Choose Contrast Checker.
- Paste the foreground hex value.
- Paste the background hex value.
- Read the contrast ratio and WCAG pass/fail rows.
- Repeat for hover, focus, selected, disabled, and dark-mode states.
If you are starting from a visible pixel instead of a written value, begin with the built-in-first guide to picking a color on Mac. Then use the companion guide to copy the right color-code format.
03Ratio checks fail quietly when the wrong colors are tested
Most contrast mistakes are not formula mistakes. They are input mistakes.
Check the actual foreground and background pair. If a label sits on a card, use the card background, not the page background. If text appears over an image or gradient, inspect the least favorable area behind the text. If opacity changes the final color, resolve the composited result before entering the pair.
Dark mode deserves its own pass. So do tinted sidebars, selected rows, focus rings, warning banners, and destructive actions. The color pair that passes in the marketing mockup may not pass inside a real app surface.
04When a passing ratio is still not enough
WCAG contrast uses the specified foreground and background colors. Do not round a failing result up: 4.499:1 does not meet a 4.5:1 threshold. A pair that clears the number passes that calculation, but the number does not model every rendering condition.
W3C notes that anti-aliasing can make thin or unusual fonts appear fainter than their specified color. Keep the threshold unchanged, then inspect the real text at its final size and weight. Give borderline pairs more separation when you can do so without changing the design's meaning.
For non-text UI, test the meaningful component or graphical object against adjacent colors. WCAG's non-text contrast criterion generally uses 3:1 for visual information needed to identify controls, states, and graphics. Logos, incidental text, inactive controls, and purely decorative elements have specific exceptions, so do not turn one ratio into a universal rule.
05Where TeenyTool fits in a color workflow
TeenyTool is useful when contrast is one small part of a local utility flow. The current app also includes related Color Converter, Tint and Shade, Gradient Generator, Complementary Colors, Color Palette, and other color tools.
Use Contrast Checker for a known pair. Use the nearby tools to convert a value or explore an adjusted color, then rerun the original foreground and background check. Do not treat a generated shade as approved until it passes in the actual UI state.
The Mac color tools hub places picking, code conversion, contrast, and private UI handoff in one workflow.
Common questions
What contrast ratio should normal text pass?
WCAG 2.2 Success Criterion 1.4.3 sets 4.5:1 as the Level AA minimum for normal text and 3:1 for large text. AAA targets are higher: 7:1 for normal text and 4.5:1 for large text.
Can a passing color contrast ratio still look bad?
Yes. The calculation uses the specified colors, while font rendering, thin weights, images, gradients, transparency, and interaction states still need inspection in the real interface.
Does TeenyTool's contrast checker run locally?
Yes. The contrast checker is a local Mac tool that compares foreground and background hex values and reports WCAG AA and AAA thresholds.
Does TeenyTool test alpha or image backgrounds?
No. The current checker accepts three-digit or six-digit hex colors without alpha. Resolve transparency against its actual background and test image or gradient areas separately.
Sources checked
- TeenyTool feature claims were checked against the local homepage and source files for
Tool.swift,ColorConverterView.swift,ContrastCheckerView.swift, andColorMath.swift. - W3C WCAG 2.2 Contrast Minimum for text thresholds, large-text handling, exceptions, and the rule against rounding a failing result up.
- W3C WCAG 2.2 Non-text Contrast for UI component and graphical object contrast context.
- TeenyApps Mac color tools hub for the connected picker, converter, contrast, and privacy workflow.
- TeenyColor color-code guide for the companion screen-sampling and format handoff workflow.
Check the color pair before it ships.
teenytool keeps color contrast, conversion, text tools, encoders, formatters, image tools, and small developer utilities in one local Mac menu bar app.