TetraTint

A Mac developer tool that handles the accessibility work the system won't do for you. Give your custom colors and custom fonts the same Dark Mode, Increased Contrast, color blindness, and text size support that system values get for free. System colors automatically adjust for Dark Mode and Increased Contrast, but the brand colors you define don't. System fonts scale with the user's text size setting, but custom fonts need extra code. TetraTint fills that gap and brings your design up to accessibility standards. It's also a quick way to prepare for the Sufficient Contrast item in App Store Accessibility Nutrition Labels. Generator Enter a single Light Mode color and TetraTint automatically creates four variants: Light, Light High Contrast, Dark, and Dark High Contrast. Preview all four modes side by side, and fine-tune any variant that doesn't match your brand with the color picker. You can regenerate everything at any time to start fresh. Export the results as Contents.json, a .colorset, UIKit code, or SwiftUI code. Contrast Checker Paste in the full list of hex colors your app uses, and TetraTint tells you whether each color is fine as is, needs a high-contrast variant, or should be used for decoration only. Generate four variants for any problem color with a single click. You'll also see WCAG badges for every mode across your entire palette. Color Blindness Simulation See how your palette looks to people with protanopia, deuteranopia, tritanopia, or monochromacy. TetraTint flags color pairs that are hard to tell apart, and lets you import the Okabe–Ito, IBM, and Paul Tol colorblind-safe palettes with one click. Dynamic Type Browse a table of 11 text styles across 7 size categories, and drag a slider to preview size changes in real time. TetraTint generates UIKit, SwiftUI, and @ScaledMetric code so your custom fonts follow the user's text size setting, plus code that adapts your layout at larger sizes. System Colors View the system colors from the Human Interface Guidelines in all four modes on a single screen. Click any value to copy it instantly. Palette Export all of your saved brand colors to a single .xcassets file in one step. Automatic variants follow the same patterns system colors use from mode to mode. In Dark Mode, colors become slightly brighter and more vivid. In Light High Contrast, they're adjusted to meet 4.5:1 against a white background, and in Dark High Contrast, 7:1 against a black background. System color reference values are based on the Human Interface Guidelines and may change with OS updates. In your shipping app, use the system color APIs.

Developer Tools · iPhone, iPad · Free

Screenshots

TetraTint screenshot

Download