Built for a real task
Accessible Picker brings color sampling, previews, and contrast checks into one place. Use it while reviewing a design, refining a component, or investigating a color choice on an existing website.
Explore how this tool works and the decisions behind it.Sample colors, compare foreground and background pairs, and check contrast in the same place. Keep useful colors close while reviewing designs or refining a website.
How it worksUseful details, not extra steps.
What the tool helps you do—and where its limits are.
Use the eyedropper to sample a color, enter a hex value, or inspect a page’s text color directly. Reading the CSS text color helps when antialiasing makes the visible pixels an unreliable guide to the specified value.
Choose foreground and background colors to see a live preview and contrast result. The tool distinguishes checks for regular text, large text, and relevant interface elements so you can consider the pairing in context.
Save recent colors, label them, protect values you want to keep, and return to useful pairings as you work. Open the picker in a separate window when you want it beside the page you are reviewing.
A contrast result concerns the selected colors and the displayed threshold. A complete accessibility review also needs to consider structure, keyboard behavior, forms, content, and other aspects of the website.
Color processing and saved preferences stay in the browser. Page-text inspection starts when you invoke it on the active page.
