This browser has no screen eyedropper. The Page palette tool reads every colour the page uses instead.
Aa
The quick brown fox jumps over the lazy dog.
14px body text — abc 0123456789
ButtonA hyperlinkChip
—WCAG ratioAPCA —
AA Body
AA Large
AAA Body
AAA Large
AA UI 3:1
Gfx 3:1
Lc 90 Any
Lc 75 Body
Lc 60 Large
Lc 45 XL/Bold
Lc 30 UI
APCA readable sizes
Colour-vision check
Contrast as about 8% of men see it
On-brand text same hue, accessible
On-brand background same hue, accessible
Copy
Framework
Export
Drop an image, paste one, or click to browse
PNG · JPG · WebP · GIF — read on your device
Harmony builder
Scale generator
OKLCH · perceptual
Copy
Framework
Export
%
%
Converter · every format at once
See the live page the way people with different vision do.
0/100
WCAG 2.2 · Level AACheck this tab's colours and accessibility against WCAG 2.2.
Everything the tools found — colour, accessibility and inspection — in one list. Run an audit to fill it.
Inspector
Pick an element on the page to read its rules, box model and accessibility, then try CSS on it live.
</>No element selected
Choose Select element, hover the page, and click a target. Its full snapshot appears here.
P pinC copy CSSS selectorJ JSON
Box model
Page metrics
Matched rules
Computed
ARIA attributes
Attributes
Pseudo-elements
Markup
Reversible page previewDeclarations apply to this element only. Reset or Stop restores what the inspector changed without touching anything else on the page.
Read the page's design tokens — its CSS custom properties, type scale and fonts.
CSS variables
Fonts
Type scale
Your last 50 colours.
Colours and palettes you saved.
Colours
Palettes
Saved code — CSS, gradients, tokens, palettes. Kept on this device.
The full-size tools on auricartisan.com, each in a new tab.