Skip to content

Improve text-selection readability across the site #179

Description

@jubalm

Problem

Selecting text across the site can apply a large, opaque tan/gold highlight. Against the site's neon-green typography and dark backgrounds, the selected text becomes difficult to read, especially across long paragraphs.

This was first observed on:

  • /whitepapers/augur-v2/how-augur-works/#a-market-creation

The whitepaper route is the reproduction example, but the issue is global rather than limited to whitepaper pages.

Expected behavior

Selected text should remain clearly legible while still providing an obvious selection state. The highlight should adapt to the site's visual system without overpowering the text.

Suggested direction

Define a global selection treatment at the site/base styling layer, using a lower-opacity, theme-appropriate background and a text color with reliable contrast. Add component-specific overrides only where a surface genuinely needs different treatment. Check paragraphs, headings, inline code, links, footnotes, and other content surfaces.

Acceptance criteria

  • Selected text remains readable across the site.
  • Selection styling is visually compatible with the site's themes and backgrounds.
  • Contrast remains usable on desktop and mobile widths.
  • Paragraphs, headings, inline code, links, and footnotes remain legible when selected.
  • Copying selected text continues to work normally.
  • Styling does not unintentionally alter selection behavior elsewhere on the site.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions