Component sampler

Components

The building blocks from RFP items A to D, in FAS's existing language. Staff add and edit each one from the WordPress editor.

The issue colours, at AA

fas.org labels each publication with its issue colour, in light text. That light text fails WCAG AA contrast on all five colours. Switching the label text to black passes on all five, and no brand colour changes.

Contrast of label text on FAS issue colours
Issue colour	Today: light text	Proposed: black text
National `#E94F37`	3.39:1 fails	Label 5.64:1 passes
Regional `#A77AD7`	2.98:1 fails	Label 6.41:1 passes
Science `#36BD96`	2.15:1 fails	Label 8.88:1 passes
Social `#FFBD12`	1.52:1 fails	Label 12.54:1 passes
Technology `#45A6FF`	2.34:1 fails	Label 8.15:1 passes

Design note WCAG 2.1 AA needs 4.5:1 for text this size. We found the failing labels on fas.org's own homepage with axe. Extending the design language means extending it to AA, and here that costs nothing visible.

Expert bios with social

RFP item B on staff and fellow pages. LinkedIn doesn't let a website pull a person's own posts, and X charges for automated reading, so we'd show profile links on every bio and let staff pin chosen posts by pasting a link, under the documented process the RFP allows.

Design note About 150 bios are staff and fellows; 882 of fas.org's 1,138 expert pages are contributors, who'd get profile links only. The example here is illustrative, not a real FAS expert.

Example Expert

Senior Fellow, Science Policy (illustrative)

LinkedIn
X
Bluesky

Pinned post

Redirects without a developer

RFP item D. Staff add a redirect in the WordPress admin, see who added it and when, and get warned before creating a loop.

Example redirects (illustrative)
From	To	Type
`/future-of-science`	`/microsite/future-of-science/`	301
`/metascience-report`	`/publication/roi-of-rd/`	301