{"uid":"cap_vp7Cg_D3B8MKMdnSAv6md","slug":"wcag-2-1-contrast-ratio-checker-8f3e318d","name":"WCAG 2.1 Contrast Ratio Checker","description":"Compute the WCAG 2.1 contrast ratio between a foreground and background color and report AA/AAA pass/fail for normal and large text.","url":"https://api.24klabs.ai/api/v1/wcag-contrast?utm_source=zero.xyz","method":"POST","headers":{},"bodySchema":{"type":"object","properties":{"bg":{"type":"string"},"fg":{"type":"string"}}},"responseSchema":{"type":"json","example":{"ratio":4.48,"AA_normal":true,"AAA_normal":false}},"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.002","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.002/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.002","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.002","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_YhxatjjSIOPGmAa-1t7ZC","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.002","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Computes the WCAG 2.1 contrast ratio between a foreground and background color and reports AA/AAA pass/fail for normal and large text.","exampleAgentPrompt":"Can you check if white text (#FFFFFF) on a navy blue background (#1A237E) passes WCAG 2.1 AA and AAA contrast requirements for both normal and large text?","exampleUseCases":[{"title":"UI accessibility audit for brand colors","prompt":"I'm using our brand's coral red (#E8473F) for body text on a white (#FFFFFF) background — does that combination pass WCAG 2.1 AA and AAA for normal text?"},{"title":"Dark mode color validation","prompt":"My dark mode uses light gray (#D1D5DB) text on a very dark background (#111827). Can you calculate the contrast ratio and tell me if it meets WCAG AA and AAA for both normal and large text?"},{"title":"Button label readability check","prompt":"I want to put black (#000000) text on a yellow (#FFD600) button — what's the WCAG contrast ratio and does it pass AA accessibility standards for normal-sized text?"}],"resultDescription":"Returns the numeric WCAG 2.1 contrast ratio (e.g. 4.5:1) between the two colors, along with pass/fail results for AA and AAA conformance levels for both normal text (requires 4.5:1 AA / 7:1 AAA) and large text (requires 3:1 AA / 4.5:1 AAA).","failureModes":["Invalid or unparseable color value provided (e.g. malformed hex, unsupported format) returns a 4xx error","Missing foreground or background color parameter returns a validation error","Unsupported color format outside accepted range returns an error response"],"whenToPreferThis":"Use this endpoint when you need a programmatic, standards-authoritative WCAG 2.1 contrast ratio calculation with explicit AA/AAA pass/fail judgments for normal and large text — ideal for automated accessibility audits, design system validation, CI/CD checks, or any agent workflow that must enforce web accessibility compliance on color pairs.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-12T12:47:47.376Z","isFirstParty":false,"canonicalSlug":"wcag-2-1-contrast-ratio-checker-8f3e318d"}