Mac color tools: source values, contrast, and display

Use Digital Color Meter when the question is, "What pixel did this Mac render?" Use the source file or design token when the question is, "What value did we specify?" Use a contrast calculator for the specified foreground and background pair. Check the display profile when identical source values look different on another monitor.

I build TeenyApps, including TeenyColor, TeenyTool, and TeenyDisplay. The apps are useful for repeat local checks, but Apple's built-in tools and the underlying source values should stay the starting point.

Which Mac color tool fits?

01Separate the source value from the rendered pixel

A hex value in CSS, a Swift color asset, and a pixel sampled from the screen are not interchangeable evidence. The source value records what the product specifies. The sampled pixel records what one Mac rendered after color management, opacity, blending, and the display path did their work.

Start with the source when you are checking a token, contrast requirement, or implementation. Sample the screen when the rendered result itself is the subject, such as a screenshot, gradient, translucent overlay, or unexplained mismatch.

Keep both when they differ. A useful bug note says which value came from the source, which came from the screen, which color space the meter displayed, and which state was open.

02Use Digital Color Meter for rendered pixels

Digital Color Meter ships with macOS and reads colors anywhere on the screen. Apple documents controls for the display format, aperture size, color space, and aperture lock. Choose View > Display Values to change an RGB-based format, then use Color > Copy Color as Text or Shift-Command-C to copy the reading.

Reduce the aperture when you need one pixel. A larger aperture averages every pixel inside it. For extended dynamic range content, Apple's guide also provides a native EDR display option; other color spaces clip those readings to standard dynamic range.

This is enough for a quick inspection. Record the selected color space with the reading. Otherwise, the copied numbers can look authoritative while hiding the context that produced them.

03Use a dedicated picker for repeat work

A dedicated picker earns its place when the same color needs to move through several steps. The TeenyColor system-wide picker guide covers the built-in route first, then the faster repeat workflow.

TeenyColor's local Swift source calls Apple's NSColorSampler, converts the result to sRGB, and copies the selected format to the Mac pasteboard. It supports nine formats, including hex, RGB, HSL, CSS rgba, SwiftUI Color, and UIColor. It also keeps history, lets you pin or rename colors, and exports text or JSON palettes.

Those features solve reuse. They do not turn a rendered pixel into the original token, recover a source image's embedded color data, or prove that an interface is accessible. Keep the rendered value and the source-of-truth value separate when they differ.

04Generate a candidate without mistaking it for a token

A tint or shade generator is useful when a known source value needs a lighter or darker candidate. TeenyTool's current Swift source creates ten RGB mixes toward white and ten toward black in 10 percent steps, rounds each channel, and copies the chosen uppercase hex value.

That method is predictable, but it is not HSL lightness and it is not a perceptually uniform scale. The Mac tint and shade guide shows the exact interpolation rule and a worked example.

Copy one candidate for one named state. The design system or codebase should own the final token after review. A grid of generated swatches is not a design decision.

05Calculate contrast from the specified pair

Contrast belongs to a foreground and background pair. WCAG 2.2 Level AA sets a 4.5:1 minimum for normal text and 3:1 for large text. Level AAA uses 7:1 and 4.5:1. Incidental text and logotypes are exceptions, while meaningful non-text controls and graphical objects have separate 3:1 guidance.

The TeenyTool contrast-checker guide shows how to enter the actual hex pair and repeat the check for each state. The local Swift view accepts three- or six-digit hex colors, calculates relative luminance, reports the ratio, and shows AA and AAA results for normal and large text.

W3C guidance says to evaluate the colors specified for the adjacent foreground and background, not antialiased edge pixels sampled from a screenshot. A passing number still does not verify text over an image, alpha blending, color-only meaning, focus visibility, or every component state.

06Check the display when appearance changes by screen

A display profile changes how a monitor presents color. It does not rewrite the hex values in CSS or the color assets in an app. If the specified pair and contrast result stay the same but the interface looks washed out on one external monitor, troubleshoot the display path separately.

Apple says macOS selects a recommended display profile by default. Displays settings can show or change the active profile, while ColorSync Utility provides details about installed profiles. Calibration creates a profile for a particular display and environment; Apple notes that ordinary home or office use usually does not require it.

The external monitor color-profile guide separates the macOS profile, monitor picture mode, HDR setting, connection path, brightness, and contrast. TeenyDisplay reports the active profile name as read-only context. It does not switch profiles.

07Record a decision that another person can reproduce

Keep private screenshots and tokens local when possible, but do not leave the final decision inside a utility. Record the source value, rendered sample if relevant, display and profile, foreground/background pair, calculated result, chosen candidate, and the limitation that still needs review.

Move the approved value into the real system of record: a named color asset, CSS custom property, design token, issue, or review note. The utility should shorten the check. It should not become the only record of it.

Mac color QA checklist

1. Name the question: source value, rendered pixel, replacement candidate, contrast result, or display appearance.
2. Record the source value before sampling or generating anything.
3. Sample the rendered state only when the pixel itself matters, with the meter's color space noted.
4. Generate one candidate for one state, then return the approved result to the source of truth.
5. Calculate contrast from the specified adjacent pair, not antialiased screenshot pixels.
6. Check the active display profile and monitor mode when identical source values look different by screen.
7. Inspect images, gradients, opacity, focus, and color-only meaning outside the numeric check.

Common questions

What is the best built-in Mac color picker?

Apple's Digital Color Meter is the best built-in starting point for reading a screen color. It can change RGB display formats, choose a color space, adjust or lock the aperture, and copy the color as text with Shift-Command-C.

When is a dedicated Mac color picker useful?

A dedicated picker is useful when you sample repeatedly and need a global shortcut, automatic clipboard copy, several code formats, searchable history, pinned colors, or a small palette export. A one-off pixel reading usually does not need another app.

What contrast ratio should UI text meet?

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text, with exceptions for incidental and logo text. Meaningful non-text UI cues generally need 3:1 against adjacent colors.

Does a Mac display color profile change the WCAG contrast ratio?

A display profile changes how the monitor presents color, not the authored foreground and background values used for a WCAG calculation. Record the specified pair for the ratio, then check the display profile separately when the same interface looks different across screens.

Sources checked

• Apple Digital Color Meter User Guide for screen readings, RGB display formats, color spaces, aperture controls, EDR handling, and copy shortcuts.
• Apple Support: Change your Mac display's color profile for the recommended default, profile selection, ColorSync Utility, and custom-profile path.
• Apple Support: Calibrate your Mac display for ambient-light factors, Display Calibrator Assistant, and Apple's ordinary-use boundary.
• Apple NSColorSampler documentation for the native sampler used by TeenyColor.
• W3C WCAG 2.2 Contrast (Minimum) and Contrast (Enhanced) for text thresholds and exceptions.
• W3C Understanding Non-text Contrast for meaningful controls and graphical objects.
• TeenyColor, TeenyTool, and TeenyDisplay claims were checked against their current homepages and local Swift source for sampling, formats, history, palette export, RGB tint and shade interpolation, contrast calculation, and read-only display-profile reporting.