alphagov · 36degrees · Feb 26, 2026 · Nov 7, 2025 · Feb 27, 2026 · Feb 27, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,33 @@ If you were using the `_<COMPONENT_NAME>.scss` files, use the component's `_inde
 
 We made this change in [#6761: Deprecate `_<COMPONENT_NAME>.scss` files](https://github.com/alphagov/govuk-frontend/pull/6761).
 
+#### Use `color: govuk-functional-colour(text)` to set the text colour
+
+We've updated how the text colour changes to pure black when printing. Instead of each use of the text colour needing to be followed by an `@media print` query, GOV.UK Frontend now changes the value of the `--govuk-text-colour` custom property in a single media query:
+
+```scss
+// Previously
+// For each use of the `text` functional colour through `govuk-functional-colour('text')`
+color: var(--govuk-text-colour, #0b0c0c);
+
+@media print {
+  color: var(--govuk-print-text-colour, #000);
+}
+
+// Now
+// Only once at the start of the compiled CSS
+:root { --govuk-text-colour: #0b0c0c; }
+@media print {
+  :root { --govuk-text-colour: var(--govuk-print-text-colour, #000); }
+}
+```
+
+This change allows you to simplify how the text colour is applied to your CSS rulesets. You can now use a single `color` declaration rather than the previous `govuk-text-colour` mixin call.
+
+Replace your `@include govuk-text-colour;` mixin calls with `color: govuk-functional-colour(text)`, as we'll be removing the `govuk-text-colour` mixin in a future breaking release.
+
+We made this change in [pull request #6427: Use custom properties to switch print text to pure black](https://github.com/alphagov/govuk-frontend/pull/6427).
+
 ### Fixes
 
 We've made fixes to GOV.UK Frontend in the following pull requests:

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/_index.scss b/packages/govuk-frontend/src/govuk/components/accordion/_index.scss
@@ -25,11 +25,11 @@
 
   .govuk-accordion__section-button {
     @include govuk-font($size: 24, $weight: bold);
-    @include govuk-text-colour;
 
     display: block;
     margin-bottom: 0;
     padding-top: govuk-spacing(3);
+    color: govuk-functional-colour(text);
   }
 
   // Remove the bottom margin from the last item inside the content

diff --git a/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss b/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss
@@ -24,10 +24,10 @@
 
   .govuk-breadcrumbs {
     @include govuk-font($size: $font-size);
-    @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
     margin-bottom: govuk-spacing(2);
+    color: govuk-functional-colour(text);
   }
 
   .govuk-breadcrumbs__list {

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
@@ -146,10 +146,12 @@
 
   .govuk-checkboxes__divider {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
     $govuk-divider-size: $govuk-checkboxes-size !default;
     width: $govuk-divider-size;
+
     margin-bottom: govuk-spacing(2);
+    color: govuk-functional-colour(text);
     text-align: center;
   }
 

diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss
@@ -3,10 +3,10 @@
 @include govuk-exports("govuk/component/details") {
   .govuk-details {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
     @include govuk-responsive-margin(6, "bottom");
 
     display: block;
+    color: govuk-functional-colour(text);
   }
 
   .govuk-details__summary {

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss
@@ -5,12 +5,12 @@
 @include govuk-exports("govuk/component/error-summary") {
   .govuk-error-summary {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
 
     border: $govuk-border-width solid;
     border-color: govuk-functional-colour(error);
+    color: govuk-functional-colour(text);
 
     &:focus {
       outline: $govuk-focus-width solid;

diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss b/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss
@@ -21,7 +21,6 @@
 
   .govuk-fieldset__legend {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
 
     // Fix legend text wrapping in Edge and IE
     // 1. IE9-11 & Edge 12-13
@@ -31,6 +30,7 @@
     max-width: 100%; // 1
     margin-bottom: govuk-spacing(2);
     padding: 0;
+    color: govuk-functional-colour(text);
 
     white-space: normal; // 1
   }

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -13,10 +13,11 @@
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
     max-width: 100%;
     margin-left: -$component-padding;
     padding: $component-padding;
+    color: govuk-functional-colour(text);
 
     // The default file upload button in Safari does not support setting a
     // custom font-size. Set `-webkit-appearance` to `button` to drop out of the

diff --git a/packages/govuk-frontend/src/govuk/components/inset-text/_index.scss b/packages/govuk-frontend/src/govuk/components/inset-text/_index.scss
@@ -3,8 +3,9 @@
 @include govuk-exports("govuk/component/inset-text") {
   .govuk-inset-text {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
     padding: govuk-spacing(3);
+
     // Margin top intended to collapse
     // This adds an additional 10px to the paragraph above
     @include govuk-responsive-margin(6, "top");
@@ -14,6 +15,7 @@
 
     border-left: $govuk-border-width-wide solid;
     border-left-color: govuk-functional-colour(border);
+    color: govuk-functional-colour(text);
 
     > :first-child {
       margin-top: 0;

diff --git a/packages/govuk-frontend/src/govuk/components/label/_index.scss b/packages/govuk-frontend/src/govuk/components/label/_index.scss
@@ -3,11 +3,11 @@
 @include govuk-exports("govuk/component/label") {
   .govuk-label {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
 
     display: block;
 
     margin-bottom: govuk-spacing(1);
+    color: govuk-functional-colour(text);
   }
 
   // Modifiers that make labels look more like their equivalent headings

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss
@@ -42,9 +42,9 @@
 
   .govuk-notification-banner__content {
     $padding-tablet: govuk-spacing(4);
-    @include govuk-text-colour;
     padding: govuk-spacing(3);
 
+    color: govuk-functional-colour(text);
     background-color: govuk-functional-colour(body-background);
 
     @media #{govuk-from-breakpoint(tablet)} {

diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -20,10 +20,10 @@
 
   .govuk-phase-banner__content {
     @include govuk-font($size: 16);
-    @include govuk-text-colour;
 
     display: table;
     margin: 0;
+    color: govuk-functional-colour(text);
   }
 
   .govuk-phase-banner__content__tag {

diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss
@@ -164,10 +164,12 @@
 
   .govuk-radios__divider {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
     $govuk-divider-size: $govuk-radios-size !default;
     width: $govuk-divider-size;
+
     margin-bottom: govuk-spacing(2);
+    color: govuk-functional-colour(text);
     text-align: center;
   }
 

diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -3,15 +3,21 @@
 @include govuk-exports("govuk/component/summary-list") {
   .govuk-summary-list {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
+    color: govuk-functional-colour(text);
+
     @media #{govuk-from-breakpoint(tablet)} {
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
       border-collapse: collapse;
     }
+
+    // Keep margins together
+    // stylelint-disable order/properties-order
     margin: 0; // Reset default user agent styles
     @include govuk-responsive-margin(6, "bottom");
+    // stylelint-enable order/properties-order
   }
 
   .govuk-summary-list__row {
@@ -211,8 +217,8 @@
 
   .govuk-summary-card__title {
     @include govuk-font($size: 19, $weight: bold);
-    @include govuk-text-colour;
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
+    color: govuk-functional-colour(text);
 
     @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);

diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss
@@ -3,12 +3,13 @@
 @include govuk-exports("govuk/component/table") {
   .govuk-table {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
     width: 100%;
     @include govuk-responsive-margin(6, "bottom");
 
     border-spacing: 0;
     border-collapse: collapse;
+    color: govuk-functional-colour(text);
   }
 
   // Modifier for tables with a lot of data. Tables with lots of data benefit

diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
@@ -12,8 +12,9 @@
     // user agent font size overrides the inherited font size
     @include govuk-font-size($size: 19);
     @include govuk-typography-weight-regular;
-    @include govuk-text-colour;
+
     margin-bottom: govuk-spacing(2);
+    color: govuk-functional-colour(text);
   }
 
   .govuk-tabs__list {
@@ -27,10 +28,10 @@
     margin-left: govuk-spacing(5);
 
     &::before {
-      @include govuk-text-colour;
       content: "\2014 "; // "— "
       margin-left: govuk-spacing(-5);
       padding-right: govuk-spacing(1);
+      color: govuk-functional-colour(text);
     }
   }
 

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss b/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
@@ -45,16 +45,18 @@
 
   .govuk-task-list__name-and-hint {
     display: table-cell;
+
+    color: govuk-functional-colour(text);
     vertical-align: top;
-    @include govuk-text-colour;
   }
 
   .govuk-task-list__status {
     display: table-cell;
     padding-left: govuk-spacing(2);
+
+    color: govuk-functional-colour(text);
     text-align: right;
     vertical-align: top;
-    @include govuk-text-colour;
   }
 
   .govuk-task-list__status--cannot-start-yet {

diff --git a/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss
@@ -55,9 +55,9 @@
   }
 
   .govuk-warning-text__text {
-    @include govuk-text-colour;
     display: block;
     padding-left: 45px;
+    color: govuk-functional-colour(text);
     // While `<strong>` is styled `bold` or `bolder` by user-agents
     // this can be reset by the app's stylesheet
     font-weight: inherit;

diff --git a/packages/govuk-frontend/src/govuk/core/_lists.scss b/packages/govuk-frontend/src/govuk/core/_lists.scss
@@ -1,11 +1,16 @@
 @include govuk-exports("govuk/core/lists") {
   %govuk-list {
     @include govuk-font($size: 19);
-    @include govuk-text-colour;
+
+    // Keep margin configuration next to each other
+    // stylelint-disable order/order-properties
     margin-top: 0;
     @include govuk-responsive-margin(4, "bottom");
+    // stylelint-enable order/order-properties
+
     padding-left: 0;
     list-style-type: none;
+    color: govuk-functional-colour(text);
 
     // Add a top margin for nested lists
     %govuk-list {