{"success":true,"version":"v1","request":{"tool":"get_calculator_schema","calculator_id":"color-contrast"},"result":{"entity_type":"calculator","id":"color-contrast","calculator_id":"color-contrast","canonical_url":"https://tttkmbb.com/developer/color-contrast","name":"Colour Contrast Checker","title":"WCAG Colour Contrast Checker – Contrast Ratio and AA/AAA Compliance for Text and UI Components","category":"developer","category_name":"Developer & IT","tool_name":"calculate_color_contrast","featured_mcp_tool":false,"description":"Computes the WCAG 2.1 contrast ratio between a foreground and a background colour from their relative luminance (sRGB linearised) and checks it against the AA and AAA thresholds for normal text, large text and non-text UI components.","use_when":"You are choosing text or button colours for a website or app and need to verify accessibility compliance (WCAG 1.4.3, 1.4.6, 1.4.11).","do_not_use_when":"Colours have transparency (composite them onto the background first), you need perceptual difference (ΔE) or colour-space conversion (use color-converter).","inputs":[{"name":"foreground","label":"Foreground (text) colour","type":"string","required":true,"description":"Hex colour: #RRGGBB or #RGB shorthand, with or without the #.","example":"#777777"},{"name":"background","label":"Background colour","type":"string","required":true,"description":"Hex colour: #RRGGBB or #RGB shorthand, with or without the #.","example":"#ffffff"}],"outputs":[{"name":"contrast_ratio","label":"Contrast ratio","type":"number","decimals":2,"description":"(L_lighter + 0.05) / (L_darker + 0.05), from 1 (identical) to 21 (black on white)."},{"name":"contrast_ratio_text","label":"Ratio","type":"string","decimals":4,"description":"The ratio written as n:1."},{"name":"luminance_foreground","label":"Relative luminance (foreground)","type":"number","decimals":4,"description":"WCAG relative luminance of the foreground, 0 (black) to 1 (white)."},{"name":"luminance_background","label":"Relative luminance (background)","type":"number","decimals":4,"description":"WCAG relative luminance of the background."},{"name":"aa_normal_text","label":"AA normal text (≥ 4.5:1)","type":"boolean","decimals":4,"description":"Passes SC 1.4.3 for text below 18 pt (24 px) regular or 14 pt (18.66 px) bold."},{"name":"aa_large_text","label":"AA large text (≥ 3:1)","type":"boolean","decimals":4,"description":"Passes SC 1.4.3 for large text."},{"name":"aaa_normal_text","label":"AAA normal text (≥ 7:1)","type":"boolean","decimals":4,"description":"Passes SC 1.4.6 enhanced contrast for normal text."},{"name":"aaa_large_text","label":"AAA large text (≥ 4.5:1)","type":"boolean","decimals":4,"description":"Passes SC 1.4.6 for large text."},{"name":"ui_components","label":"UI components and graphics (≥ 3:1)","type":"boolean","decimals":4,"description":"Passes SC 1.4.11 non-text contrast for icons, borders and focus indicators."},{"name":"rating","label":"Rating","type":"string","decimals":4,"description":"Summary of the highest level passed."},{"name":"foreground_normalized","label":"Foreground","type":"string","decimals":4,"description":"Foreground as #RRGGBB."},{"name":"background_normalized","label":"Background","type":"string","decimals":4,"description":"Background as #RRGGBB."}],"input_schema":{"type":"object","properties":{"foreground":{"description":"Hex colour: #RRGGBB or #RGB shorthand, with or without the #.","type":"string","examples":["#777777"]},"background":{"description":"Hex colour: #RRGGBB or #RGB shorthand, with or without the #.","type":"string","examples":["#ffffff"]}},"additionalProperties":false,"required":["foreground","background"]},"output_schema":{"type":"object","properties":{"contrast_ratio":{"description":"(L_lighter + 0.05) / (L_darker + 0.05), from 1 (identical) to 21 (black on white).","type":"number"},"contrast_ratio_text":{"description":"The ratio written as n:1.","type":"string"},"luminance_foreground":{"description":"WCAG relative luminance of the foreground, 0 (black) to 1 (white).","type":"number"},"luminance_background":{"description":"WCAG relative luminance of the background.","type":"number"},"aa_normal_text":{"description":"Passes SC 1.4.3 for text below 18 pt (24 px) regular or 14 pt (18.66 px) bold.","type":"boolean"},"aa_large_text":{"description":"Passes SC 1.4.3 for large text.","type":"boolean"},"aaa_normal_text":{"description":"Passes SC 1.4.6 enhanced contrast for normal text.","type":"boolean"},"aaa_large_text":{"description":"Passes SC 1.4.6 for large text.","type":"boolean"},"ui_components":{"description":"Passes SC 1.4.11 non-text contrast for icons, borders and focus indicators.","type":"boolean"},"rating":{"description":"Summary of the highest level passed.","type":"string"},"foreground_normalized":{"description":"Foreground as #RRGGBB.","type":"string"},"background_normalized":{"description":"Background as #RRGGBB.","type":"string"}}},"formula":"For each channel c = value/255: c_lin = c/12.92 if c ≤ 0.03928 else ((c + 0.055)/1.055)^2.4; L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin; contrast = (L1 + 0.05) / (L2 + 0.05) with L1 ≥ L2","method":"WCAG 2.1 definitions of relative luminance and contrast ratio for sRGB colours; thresholds 4.5:1 / 3:1 (AA), 7:1 / 4.5:1 (AAA) and 3:1 for non-text elements. The ratio is not rounded before comparison, so 4.48:1 fails AA normal text.","sources":[{"name":"WCAG 2.1 – Contrast ratio and relative luminance definitions (W3C)","url":"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio","type":"standard","retrieved_at":"2026-09-24"},{"name":"W3C – Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","type":"standard","retrieved_at":"2026-09-24"},{"name":"W3C – Understanding Success Criterion 1.4.11: Non-text Contrast","url":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html","type":"standard","retrieved_at":"2026-09-24"}],"freshness":{"type":"static","max_age_seconds":null,"note":"Deterministic formula with fixed constants; results never go stale. Inputs supplied by the caller determine the output."},"examples":[{"name":"Black on white","inputs":{"foreground":"#000000","background":"#ffffff"},"expected":{"contrast_ratio":21,"luminance_foreground":0,"luminance_background":1,"aa_normal_text":true,"aaa_normal_text":true,"ui_components":true,"contrast_ratio_text":"21:1"},"url":"https://tttkmbb.com/api/v1/calculate/color-contrast?foreground=%23000000&background=%23ffffff"},{"name":"#777777 on white","inputs":{"foreground":"777777","background":"fff"},"expected":{"contrast_ratio":4.48,"luminance_foreground":0.1845,"aa_normal_text":false,"aa_large_text":true,"aaa_normal_text":false,"aaa_large_text":false,"ui_components":true,"foreground_normalized":"#777777","background_normalized":"#FFFFFF"},"url":"https://tttkmbb.com/api/v1/calculate/color-contrast?foreground=777777&background=fff"}],"faq":[{"q":"What counts as large text?","a":"At least 18 pt (24 px) regular or 14 pt (about 18.66 px) bold; large text only needs 3:1 for AA and 4.5:1 for AAA."},{"q":"Does swapping foreground and background change the ratio?","a":"No, the formula always divides the lighter luminance by the darker one, so the ratio is symmetric."},{"q":"Why does #777777 fail even though it looks readable?","a":"Its ratio on white is 4.48:1, just under the 4.5:1 AA threshold; #767676 (4.54:1) is the lightest grey that passes."}],"tags":["color contrast checker","wcag contrast ratio","accessibility","aa aaa","contrast calculator","relative luminance"],"related":[{"calculator_id":"color-converter","reason":"Convert between hex, RGB and HSL before checking contrast."},{"calculator_id":"css-units","reason":"Font sizes that decide whether text counts as large."}],"links":{"html":"https://tttkmbb.com/developer/color-contrast","markdown":"https://tttkmbb.com/developer/color-contrast.md","json":"https://tttkmbb.com/developer/color-contrast.json","api":"https://tttkmbb.com/api/v1/calculate/color-contrast","schema":"https://tttkmbb.com/api/v1/calculators/color-contrast","openapi":"https://tttkmbb.com/openapi.json","mcp":"https://tttkmbb.com/mcp"},"version":"v1","updated_at":"2026-09-24"},"timestamp":"2026-09-24T03:46:21Z","next_actions":[{"tool":"run_calculator","calculator_id":"color-contrast","reason":"Run Colour Contrast Checker with the inputs above."}],"links":{"markdown":"https://tttkmbb.com/developer/color-contrast.md"}}