WCAG contrast & palettes
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Use this when the user wants to know whether a text, icon or border colour has enough contrast against a background: a WCAG contrast checker for one colour pair (e.g. "does white text on #F59E0B pass WCAG AA", "contrast ratio of #767676 on white", "what text color for this background"). Returns the computed WCAG 2.x ratio (truncated to 2 decimals, rounded down), AA/AAA results for normal text, large text and UI components, a verdict for a given font size, APCA Lc as draft information, and the nearest passing colours for AA and AAA (darker and lighter, same OKLCH hue and chroma). Accepts hex, 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) and CSS colour names; wide-gamut colours are clipped to sRGB with a note. Does not read colours from images or web pages, resolve CSS variables or currentColor, or check gradients as a whole (check each stop). For 3 or more colours use check_palette_contrast.
Background colour behind it, e.g. #FFFFFF, white or #1E293B. A translucent background is composited over white.
Text, icon or border colour, e.g. #767676, #1E6FD980 (8-digit hex with alpha), rgb(118, 118, 118), hsl(214 76% 48%), oklch(55% 0.18 255) or a CSS colour name such as navy. Translucent colours are composited over the background.
Optional: true when that text is bold (font-weight 700+), e.g. true. Bold text from 18.66px counts as large text.
Which colour the suggested fixes change, e.g. foreground. auto (default) changes the more colourful of the two, so brand colours keep their hue.
Optional text size in CSS pixels for a single verdict on that text, e.g. 16. 18pt = 24px; 14pt = about 18.66px.
Use this when the user wants to know whether a text, icon or border colour has enough contrast against a background: a WCAG contrast checker for one colour pair (e.g. "does white text on #F59E0B pass WCAG AA", "contrast ratio of #767676 on white", "what text color for this background"). Returns the computed WCAG 2.x ratio (truncated to 2 decimals, rounded down), AA/AAA results for normal text, large text and UI components, a verdict for a given font size, APCA Lc as draft information, and the nearest passing colours for AA and AAA (darker and lighter, same OKLCH hue and chroma). Accepts hex, 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) and CSS colour names; wide-gamut colours are clipped to sRGB with a note. Does not read colours from images or web pages, resolve CSS variables or currentColor, or check gradients as a whole (check each stop). For 3 or more colours use check_palette_contrast.
| Argument | Type | Description |
|---|---|---|
| bold | boolean | Optional: true when that text is bold (font-weight 700+), e.g. true. Bold text from 18.66px counts as large text. |
| adjust | string | Which colour the suggested fixes change, e.g. foreground. auto (default) changes the more colourful of the two, so brand colours keep their hue. |
| background* | string | Background colour behind it, e.g. #FFFFFF, white or #1E293B. A translucent background is composited over white. |
| foreground* | string | Text, icon or border colour, e.g. #767676, #1E6FD980 (8-digit hex with alpha), rgb(118, 118, 118), hsl(214 76% 48%), oklch(55% 0.18 255) or a CSS colour name such as navy. Translucent colours are composited over the background. |
| font_size_px | number | Optional text size in CSS pixels for a single verdict on that text, e.g. 16. 18pt = 24px; 14pt = about 18.66px. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"foreground",
"background"
],
"properties": {
"bold": {
"type": "boolean",
"description": "Optional: true when that text is bold (font-weight 700+), e.g. true. Bold text from 18.66px counts as large text."
},
"adjust": {
"enum": [
"auto",
"foreground",
"background"
],
"type": "string",
"description": "Which colour the suggested fixes change, e.g. foreground. auto (default) changes the more colourful of the two, so brand colours keep their hue."
},
"background": {
"type": "string",
"maxLength": 64,
"minLength": 1,
"description": "Background colour behind it, e.g. #FFFFFF, white or #1E293B. A translucent background is composited over white."
},
"foreground": {
"type": "string",
"maxLength": 64,
"minLength": 1,
"description": "Text, icon or border colour, e.g. #767676, #1E6FD980 (8-digit hex with alpha), rgb(118, 118, 118), hsl(214 76% 48%), oklch(55% 0.18 255) or a CSS colour name such as navy. Translucent colours are composited over the background."
},
"font_size_px": {
"type": "number",
"maximum": 500,
"minimum": 1,
"description": "Optional text size in CSS pixels for a single verdict on that text, e.g. 16. 18pt = 24px; 14pt = about 18.66px."
}
}
}Use this when the user has a colour palette (2 to 12 colours) and wants to know which combinations are accessible: "check contrast of my color palette", "which of these colors can I use for text", "accessible color palette checker". Returns the full pairwise WCAG 2.x contrast matrix (ratios truncated, rounded down), which pairs pass AA/AAA for text or 3:1 for large text and UI, and a recommended text colour for each background (a palette colour that passes AA, otherwise black or white). Does not generate new colours; use generate_accessible_palette for a tonal scale and check_color_contrast for fixes to one pair.
| Argument | Type | Description |
|---|---|---|
| names | array | Optional labels in the same order as colors, e.g. ["Primary", "Accent", "Surface", "Ink"]. |
| colors* | array | 2 to 12 colours to test against each other, e.g. ["#1E6FD9", "#F59E0B", "#FFFFFF", "#111827"]. Hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or CSS names; translucent colours are composited over white. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"colors"
],
"properties": {
"names": {
"type": "array",
"items": {
"type": "string",
"maxLength": 40
},
"maxItems": 12,
"description": "Optional labels in the same order as colors, e.g. [\"Primary\", \"Accent\", \"Surface\", \"Ink\"]."
},
"colors": {
"type": "array",
"items": {
"type": "string",
"maxLength": 64,
"minLength": 1
},
"maxItems": 12,
"minItems": 2,
"description": "2 to 12 colours to test against each other, e.g. [\"#1E6FD9\", \"#F59E0B\", \"#FFFFFF\", \"#111827\"]. Hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or CSS names; translucent colours are composited over white."
}
}
}Use this when the user wants an accessible colour scale or palette built from one colour: "color palette generator from hex", "generate a 50-950 scale from #1E6FD9", "tailwind color palette generator", "accessible color palette for my website". Builds an 11-step 50-950 tonal scale in OKLCH with the base hue, where 50-400 pass AA with black text, 500 passes AA with both white and black text, 600 passes AA with white text and 700-950 pass AAA with white text, and each ratio is reported. Returns CSS custom properties and a Tailwind config as downloads. Does not pick colours by mood or brand meaning and does not extract palettes from images.
| Argument | Type | Description |
|---|---|---|
| name | string | Token name for CSS variables and the Tailwind colour key, e.g. brand (gives --brand-500). Default brand. |
| base_color* | string | Brand or base colour to build the 50-950 scale from, e.g. #1E6FD9, rgb(30, 111, 217), oklch(55% 0.18 255) or teal. |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"base_color"
],
"properties": {
"name": {
"type": "string",
"maxLength": 32,
"description": "Token name for CSS variables and the Tailwind colour key, e.g. brand (gives --brand-500). Default brand."
},
"base_color": {
"type": "string",
"maxLength": 64,
"minLength": 1,
"description": "Brand or base colour to build the 50-950 scale from, e.g. #1E6FD9, rgb(30, 111, 217), oklch(55% 0.18 255) or teal."
}
}
}