Almost every church we work with has a color story. The gold that echoes the trim on the sanctuary ceiling. The burgundy from an old hymnal. The deep navy someone chose in 2011 because it "looked reverent." These palettes carry meaning. They also, quite often, fail accessibility.
Put white text on that gold, and the contrast ratio drops below the 4.5:1 threshold that the WCAG guidelines call for. Put dark text on it and you might scrape by — until someone lightens the shade for a fall banner or a Christmas Eve landing page. The result is a visitor squinting at a "Plan a Visit" button in the parking lot, holding their phone up to the winter sun, missing the very message you wanted them to see.
For years, the fix has been manual. Designers pick a text color per button. Developers add a class for "on gold" and another for "on light gold." A pastor asks for a one-off Easter theme and the whole system quietly breaks. In 2026, the browser can just do this for us.
What contrast-color() actually does
The contrast-color() CSS function takes a background color and returns a text color that meets contrast against it. In its simplest form, it picks between black and white for you:
.button {
background: var(--brand-gold);
color: contrast-color(var(--brand-gold));
}
Change --brand-gold from a warm 2011 mustard to a bright 2026 sunlit yellow, and the text color flips from white to black on its own. No component override. No designer email. No accessibility regression.
The function became part of Baseline 2026, which means Chrome, Edge, Safari, and Firefox all support it in their current stable releases. For the small share of visitors on older browsers, we wrap the rule in @supports and fall back to whatever we were doing before:
.button {
background: var(--brand-gold);
color: #1a1a1a;
}
@supports (color: contrast-color(black)) {
.button {
color: contrast-color(var(--brand-gold));
}
}
That is the entire progressive enhancement. Old browsers get the hand-picked color. New browsers get one that always fits.
Where it earns its keep on a church site
Some places on a ministry site benefit from this more than others.
The primary call-to-action button. "Give," "Plan a Visit," "Watch Live." These sit on brand colors that shift over the year — Advent purple, Lent maroon, Easter white, Pentecost red, the deep green of Ordinary Time if you observe the church calendar visually. contrast-color() means each seasonal swap can happen at the palette level, in one variable, and every button downstream stays readable.
Scripture overlays on hero images. A hero photo of a sunlit sanctuary and a Sunday verse laid over it is a common pattern. The photo changes weekly. So does the average brightness of the pixels behind the words. If your CMS lets someone pick a background tint per hero, contrast-color() on that tint means the verse never disappears into a bright cloud.
Event and announcement cards. Small groups. Vacation Bible School. A funeral notice. A youth pastor drops in a background color for the event tile — sometimes tastefully, sometimes not. The tile still needs to be legible for the widow reading it at 6 a.m. contrast-color() picks the right text tone whether they chose forest green or lemon yellow.
Sermon series pages. Many churches theme a page around whatever the current series artwork is: a warm rust for a series on Ruth, a cool blue for one on Jonah. When the artwork changes, so does the accent color. One CSS variable, one function call, and every "Watch," "Notes," and "Discussion Guide" button falls in line.
A small step further
The single-argument form picks black or white. There is also a form that lets you supply your own pair — say, a warm cream and a deep charcoal that fit your brand better than pure black and white:
.button {
background: var(--brand-color);
color: contrast-color(var(--brand-color) vs #f7f2e8, #1c1a17);
}
The browser will pick whichever of the two colors gives the better contrast against the background. It is a way to keep the palette feeling handmade while still meeting the standard.
Why we treat this as more than a technical detail
Accessibility on a church website is, in the plainest sense, hospitality. It is the difference between a first-time visitor being able to read your service times and giving up because the gray-on-gray card looks like a graphic instead of information. The people most affected by low-contrast type — older members, visitors with low vision, anyone reading in sunlight — are often the same people we most want to welcome well.
A single CSS function will not solve accessibility on its own. It will not add captions to your livestream or fix a form label. But it removes one entire category of quiet failure — the seasonal color change that broke a button no one noticed until Easter Sunday morning.
If your site's colors have been a slow source of drift, we would be glad to look at the palette with you and set up a system that stays legible through every season of the church year. You can reach us here.