filesoft.Discuss a project

FREE / FILESOFT DEVELOPER TOOLS

Theme color & contrast preview

Try a palette on fields, labels and button states. Measure contrast pairs and export color values before applying them in FileMaker.

Works in your browser. No account, uploaded inputs or saved work.

Choose a palette. Inspect every state.

Starting palettes are design studies, not previews or exports of Filesoft’s commercial themes. Applying one replaces your current colors.

Your interface, in context.

Illustrative browser preview. Button samples show each state side by side; the focus sample is keyboard-focusable.

PROJECT WORKSPACE

Prepare the next handover.

Readable labels and clear states help people understand what to do next.

Project name

Studio refresh

Status

Ready for review ▾
Save projectDefault
Save projectHover
Save projectPressed
Focus ring
Disabled · exempt

Measured color pairs.

Targets: normal text AA 4.5:1; selected non-text boundaries and focus rings 3:1. Decisions use full precision; displayed ratios are rounded.

PairRatioTargetResult

Use the numbers as a starting point.

  1. Choose a starting palette, then edit its six-digit hex colors. Each role affects the preview immediately.
  2. Review body text, secondary text and button text in all three active states. Adjust pairs marked “Below target”.
  3. Check boundaries and the focus ring against their surrounding colors. Do not rely on color alone to communicate status.
  4. Copy the palette and apply your choices to a FileMaker working copy. Review actual fonts, sizes, states and layout behavior on each intended platform.

WCAG 2.2 text targets are 4.5:1 for normal text and 3:1 for large text at AA; AAA raises these to 7:1 and 4.5:1. Large means at least 18-point regular or 14-point bold. This preview uses the normal-text target. Inactive controls are exempt from these contrast requirements.

Opaque sRGB colors only. Gradients, transparency, images and native rendering are not modeled. Pair results do not certify accessibility, focus geometry or a FileMaker theme. CSS and JSON exports are reference values, not installable FileMaker themes.

W3C text contrast · W3C non-text contrast · Button-state guide ↗ · Explore paid FileMaker themes ↗

Filesoft counts page loads and selected button clicks in aggregate. Your criteria, error searches and colors are not included. Browser privacy signals and the analytics-off preference disable these counts.

Explore all developer tools ↗

STEP-BY-STEP GUIDE

Work through an example.

Check a FileMaker color palette before styling your layouts ↗