yukt.tools
design

Contrast Checker

Test a foreground and background pair against text and UI contrast thresholds.

waiting

Color pair

HEX, rgb(), rgba(), hsl(), or hsla(); opaque colors only.

Text, icon, or border color

Surface behind the foreground

samples
Change a color or choose a sample to run the check.

Contrast workbench

Preview uses the current editable colors

ratio--
live previewpending

Interface copy should stay readable at normal body sizes, not just in oversized headings.

Aa

Large labels, chart values, and button text use the same color pair.

Primary action

Normal text

Body copy below 18 pt

AA waiting
4.5:1
AAA waiting
7:1

Large text

18 pt or 14 pt bold

AA waiting
3:1
AAA waiting
4.5:1

UI components

Icons, borders, controls

AA waiting
3:1
AAA n/a
not defined

Normalized colors

API-parsed values and luminance

Foreground
#111827
API value pending
Background
#ffffff
API value pending

Copy summary

Paste into a ticket, review, or design note

Run a valid contrast check to create a copyable result summary.
Related tools and guides
design

Aspect Ratio Calculator

Simplify aspect ratios and calculate scaled width or height.

open
design

CSS Clamp Calculator

Generate a responsive CSS clamp() value from minimum and maximum sizes and viewport widths.

open
design

Color Converter

Convert HEX, RGB, and HSL colors into copy-ready values.

open
design

Spacing Scale Generator

Generate CSS spacing design tokens from a pixel base, rem base, and token prefix.

open