Mac color contrast checker: test UI text before you ship
A contrast ratio is not a full accessibility review, but it is a cheap mistake to catch before a color pair reaches production.
Use a local Mac color contrast checker when the colors came from real work: unreleased UI, a client mockup, product screenshots, internal style experiments, or source code. The test itself is simple. The privacy habit matters.
TeenyTool includes a Contrast Checker in its Colors category. Enter foreground and background hex values, or pick them with the color controls, and it reports the contrast ratio plus WCAG AA and AAA results for normal and large text.
Start with the ratio. Then look at the actual UI. Thin type, image backgrounds, disabled states, hover states, and icons can still fail in practice even when one text pair passes the math.
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 the text is actually large enough and not rendered too light. |
| 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 foreground and background hex values, converts each color to RGB, linearizes the color 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 so the result is not just a number.
That is enough for a pre-commit color check. It is not a replacement for full accessibility testing, but it catches the obvious failures quickly.
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 screen color instead of a written value, use TeenyColor to sample the color first. Its companion guide on copying color codes on Mac explains when to copy hex, RGB, HSL, SwiftUI Color, UIColor, or CSS rgba.
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, sample the real area behind the text. If a disabled button uses lower opacity, test the disabled state, not the default state.
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 ratios are a floor. They do not know whether your font is thin, whether the text is tiny, whether the user increased contrast in macOS, or whether the color pair is being used as the only signal for an error state.
If the pair barely passes, improve it. A value like 4.52:1 might clear the threshold, but it leaves no room for anti-aliasing, display differences, font weight, or future design edits. A comfortable pass is easier to defend than a borderline one.
For non-text UI, check the component itself: icon against background, input border against fill, focus ring against nearby colors, chart line against the plot area. Text contrast alone will miss those failures.
05Where TeenyTool fits in a color workflow
TeenyTool is useful when contrast is one small part of a larger local utility flow. The same app also includes Color Converter, Color Picker, Tint and Shade, Gradient Generator, Random Color, Complementary Colors, Color Palette, and Color Opposite.
That makes it a good fit for quick checks around a design handoff: convert a hex value to RGB or HSL, check the foreground/background pair, generate a nearby shade, then move back to source code.
The TeenyApps hub article on Mac color tools for designers and developers puts this into the larger picker, converter, contrast, and privacy 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. A ratio is a gate, not the full review. Thin fonts, small sizes, image backgrounds, hover states, disabled states, and brand treatment still need visual inspection.
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.
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 contrast thresholds, ratio notes, and large-text handling.
- 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.