indico / indico/indico

Conference theme heading colour fails contrast (dark orange on white)

Open Beginner friendly
#7,622 0 comments 0 reactions 0 assignees View on GitHub
a11y bug
Dominant language
Python
Stars
2.1k
Forks
551
Avg merge
2d 9h
Merged PRs (30d)
21

Description

## Affected WCAG 2.1 criteria

- **1.4.3 Contrast (Minimum) (AA)** — normal-size text needs at least 4.5 : 1

## Where it shows up

The "Call for Abstracts" page heading is rendered in the conference theme's accent colour `rgb(203, 109, 4)` (dark orange) on a white background, at 22.28 px, weight 400.

Measured contrast: **≈ 3.43 : 1**.

At 22.28 px (≈ 16.7 pt) weight 400 it does **not** qualify as "large text" (which needs 18 pt / 24 px regular, or 14 pt / 18.66 px bold), so the 4.5 : 1 threshold applies and the heading fails. The same accent colour is applied to other conference-theme headings (the Overview page title, "My abstracts" on the CFA landing page, section headings in Papers), so this is theme-wide.

First observed on the CFA landing page (`/event//abstracts/`).

## Affected pages / components

The conference theme exclusively (meetings and lectures use different headings). One or two SCSS variables; no markup change.

## Proposed fix

Two options, preferred first:

1. **Darken the accent colour** in the conference theme. `rgb(170, 85, 0)` reaches 4.53 : 1 against white while keeping the warm-orange character. This also fixes contrast everywhere the accent is used (links, emphasis text, small meta lines), not just headings.
2. **Make the heading bold** (weight 700) at ≥ 18.66 px, which passes as large text at 3 : 1 — but only fixes headings.

Option 1 is preferable. Because it changes a shared theme variable, every element deriving from it shifts subtly, so run a visual regression across representative conference pages before merging. (This was deliberately left out of the page-scoped abstract work for exactly that reason — it belongs as its own change.)

Contributor guide

Open the contributing guide

Research direction

Start by locating the conference theme's SCSS accent-colour variables and the styles used by the Call for Abstracts heading. Change the shared accent colour to meet the stated 4.5:1 contrast ratio, then check representative conference pages for visual regressions; done means the affected headings and other accent-colour text pass contrast review.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
75/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.