#2563EB: Tailwind blue-600 codes, text contrast and shades

#2563EB has been blue-600 since Tailwind CSS 2, and Tailwind 3 kept it. The official forms plugin, @tailwindcss/forms, takes blue-600 from your theme for its defaults. In a Tailwind 3 project with the stock palette, that makes #2563EB the focus ring and border on text inputs, selects and textareas, and the fill of checked checkboxes and radio buttons.

Tailwind 4 rewrote the palette in OKLCH, and its blue-600 is oklch(54.6% 0.245 262.881). #2563EB works out to oklch(54.61% 0.2152 262.88). The chroma went from 0.2152 to 0.245, so the version 4 blue is more vivid. It still fits inside sRGB, though, so any screen can show it as written.

White text on #2563EB scores 5.17:1 in WCAG 2. That passes AA at any size and AAA for large text, but not AAA for normal text, which asks for 7:1. Black text gets 4.06:1, so it passes AA only for large text: 24px and up, or about 18.66px bold. APCA, a newer method that isn't part of any WCAG standard, agrees on white. It scores white text Lc -80.2, past the Lc 75 it suggests for body text, and black text only Lc 29.2, under the Lc 45 it suggests even for large headlines.

That makes #2563EB a good swap when blue-500, #3B82F6, is too light for a white label. White text on #3B82F6 gets only 3.68:1, and one step darker clears AA. The ratio is the same with the colors swapped, so #2563EB text on a white page also gets 5.17:1 and passes AA for links and body text. Next to black body text, a #2563EB link sits 4.06:1 apart, past the 3:1 that technique G183 asks for when color is the only cue. An underline is still the simpler choice.

Use #2563EB anywhere it meets white: button fills with white labels, links on a white page, badges and active tabs. It passes WCAG AA both ways at 5.17:1. Keep black text on it for large headings only, since 4.06:1 fails AA for normal text. If you need AAA for normal text, go two steps down the scale to #0039C0, which gives white text 8.95:1.

Black text passes AA on all four lighter steps. The palest two make soft backgrounds for alerts, badges and selected rows. White text passes on all four darker steps, so they suit hover and pressed states for a #2563EB button. Click any step to open it in the Color Picker.