Contrast ratio letter grade
Turn a color pair's contrast into a letter you can drop into a review: #111827 on white reaches 17.74 to 1 and earns an A, because grade A starts at 12 to 1. Grades run from A through E down to fail. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Foreground
- #111827
- Background
- #ffffff
- Contrast ratio
- 17.74
- Grade
- A
- Grade label
- Excellent
- Band min
- 12
This contrast ratio letter grade tool takes two hex colors—foreground and background—computes the official WCAG 2.x contrast ratio, and maps that ratio onto a fixed letter scale from A through E down to fail. Designers, developers, and accessibility reviewers often want a single letter they can put in a design review, a token spreadsheet, or a pull-request summary, not only the raw ratio and AA/AAA booleans. The engine follows relative luminance: each sRGB channel is linearized, luminance is weighted with the standard 0.2126, 0.7152, and 0.0722 coefficients, and the ratio is (lighter plus 0.05) over (darker plus 0.05). Bands are deterministic: A starts at twelve to one, B at seven (AAA normal text), C at four point five (AA normal text), D at three (AA large text), E at two, and anything weaker is fail. Results never depend on network calls, random sampling, or the calendar clock.
What each contrast grade means
A contrast letter grade compresses the continuous WCAG contrast ratio into a short ordinal label that stakeholders can scan without memorizing threshold tables. Grade A means the pair reaches at least twelve to one—well above AAA for normal text and close to the practical top of readable sRGB pairs short of pure black on pure white. Grade B means at least seven to one, the AAA threshold for normal text.
Grade C means at least four point five to one, the familiar AA threshold for body copy. Grade D means at least three to one, which still clears AA for large text but is too weak for small body type under the same guidelines. Grade E means at least two to one: some luminance difference remains, but the pair fails every WCAG text contrast criterion.
Grade fail means the ratio is below two to one—including identical colors at one to one—so the pair should not be used for any meaningful text or icon on that surface. There is no page crawl, opacity blending, or gradient sampling: you supply two explicit hex colors and receive a reproducible grade suitable for tickets, design tokens, and automated gates.
Input contract, hex parsing, and reproducible band logic
Both values must be hex: optional leading hash, either three digits that expand to six (#abc becomes #aabbcc) or six full digits, case-insensitive. Alpha suffixes, rgb() functions, hsl() functions, named CSS colors, and bare integers are rejected with a message that names the field and shows what was received. Each color is capped at thirty-two characters to keep validation cheap and to block accidental paste of long CSS snippets.
After parsing, channels are linearized with the WCAG piecewise sRGB curve—divide by 12.92 below the 0.04045 threshold, otherwise raise ((c plus 0.055) over 1.055) to the power 2.4—then combined into relative luminance. The grade is chosen from the unrounded floating-point ratio so a displayed 6.99 cannot claim band B when the true ratio is still below seven.
Where letter grades fit in design systems, reviews, and CI
Product teams often need a one-character score for dashboards and design-review checklists when a full AA/AAA matrix is too wide for a spreadsheet column or a status badge. Engineers wire the same contract into pull-request checks that block a token change if primary body text drops below grade C, or that warn when large headlines fall to D. QA and accessibility specialists attach grade plus the numeric ratio to bug reports so developers fix the exact pair instead of guessing from a screenshot.
Content and marketing teams verify that campaign hex codes still earn at least C when placed on light or dark site backgrounds.
What you can do with it
Design-token scorecards
Grade every foreground/background pair in a brand palette with a single letter for light and dark themes before locking tokens.
FAQ
What does the contrast ratio letter grade tool cost?
It is free in your browser on this page.
How are letter grades mapped from the contrast ratio?
A ≥ 12, B ≥ 7 (AAA normal), C ≥ 4.5 (AA normal), D ≥ 3 (AA large), E ≥ 2, fail below 2. Bands use the unrounded WCAG ratio; the displayed ratio is rounded to two decimals.
How is this different from a WCAG AA/AAA contrast checker?
An AA/AAA checker returns pass/fail booleans for normal and large text. This tool maps the same WCAG ratio onto a letter scale A–E/fail for scorecards and badges.
Does this tool scan my website for contrast issues?
No. It only grades two hex colors you provide.
Which color formats does the contrast grade tool accept?
Hex colors only, with three or six digits, with or without the leading hash and in any case. Named colors, RGB or HSL notation and transparency are refused, so a wrong value never receives a grade.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast-grade",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast-grade", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast-grade", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"foreground": "#111827",
"background": "#ffffff"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Use the free browser path for palette workshops and design tokens, or the API at $0.002 per successful request when CI and design systems need the same grade matrix every time.
What a contrast letter grade means and what the response contains
The response echoes each color as a normalized lowercase #rrggbb hex and an rgb(r, g, b) string, reports contrast_ratio rounded to two decimals for display, returns grade and grade_label strings, exposes band_min as the numeric floor of the winning band, and tags method as wcag_contrast_letter_grade so routers can distinguish this landing from a pure AA/AAA checker. Invalid hex, missing fields, non-string values, and overlong strings raise invalid_input and are never billed.
Input contract, hex parsing, and reproducible band logic
Send a JSON object with foreground for the text or icon color and background for the surface behind it. Aliases fg, color1, text, and hex1 map to the first color; bg, color2, and hex2 map to the second so forms and spreadsheets can keep their own column names. Bands are fixed constants in code; there is no configuration switch that changes the scale per request, which keeps goldens, CI assertions, and classroom rubrics bitwise stable.
Where letter grades fit in design systems, reviews, and CI
Designers paste hex pairs from Figma or a token JSON file and read A through fail before committing a scale for light and dark themes. On this page the work runs entirely in your browser; through the API each successful lookup costs $0.002, failed validation is not charged, and nothing is stored after the response returns. That split—free interactive exploration and a priced, identical API—matches the rest of the KIT tier-A catalog. Pair this tool with a full WCAG AA/AAA matrix checker when you need boolean compliance flags, and with color conversion utilities when you must derive hex values from RGB or HSL before grading.
Integration use cases
Pull-request contrast badges
Call the API from CI to fail builds when primary body hex pairs drop below grade C (AA normal text band).
Accessibility review summaries
Attach grade, grade_label, and contrast_ratio to tickets so reviewers and engineers share one short score plus the numeric ratio.
Technical questions
Which color formats are accepted?
Hex only: #RGB or #RRGGBB, with or without the leading hash, case-insensitive. rgb(), hsl(), named colors, and alpha hex are rejected with invalid_input.