1. 01Type a CSS color — HEX, rgb(), hsl(), a color name — or use the native color picker.
2. 02Copy whichever format you need, or click a swatch in the scale to copy its HEX value.
3. 03In the contrast area, choose the foreground and the background and read the ratio with its WCAG AA/AAA verdict.
4. 04In a browser that supports EyeDropper, click “Pick from screen”; cancelling with Esc is not treated as an error.

• What is accepted depends on colord's support for CSS color syntax; it is not a complete parser for every future color function a browser may add.
• The scales are algorithmic results from colord.tints(10) / shades(10) and are not the fixed palette of any design system.
• The WCAG check uses the WCAG 2.0 contrast thresholds as implemented by the plugin: AA body text 4.5, AA large text 3, AAA body text 7, AAA large text 4.5.
• EyeDropper is only available in browsers that implement that Web API; it requires a deliberate click from you and is bound by browser permissions and the secure-context rules.
• Screen picking returns just the sRGB HEX value you selected — it does not keep capturing the screen or record video.

Color calculations run locally in the browser; EyeDropper only returns a single color value after you invoke it yourself, and no screen content is uploaded.