diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 2050e1730..1e4fd0039 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -60,6 +60,7 @@ import FieldArchivingPn from './fields/FieldArchivingPn.vue';
 import FieldAutosuggestPreset from './fields/FieldAutosuggestPreset.vue';
 import FieldBaseAutosuggest from './fields/FieldBaseAutosuggest.vue';
 import FieldColor from './fields/FieldColor.vue';
+import FieldContrastColorPicker from './fields/FieldContrastColorPicker.vue';
 import FieldControlledVocab from './fields/FieldControlledVocab.vue';
 import FieldPubId from './fields/FieldPubId.vue';
 import FieldHtml from './fields/FieldHtml.vue';
@@ -92,6 +93,7 @@ export default {
 		FieldAutosuggestPreset,
 		FieldBaseAutosuggest,
 		FieldColor,
+		FieldContrastColorPicker,
 		FieldControlledVocab,
 		FieldPubId,
 		FieldHtml,
diff --git a/src/components/Form/fields/FieldContrastColorPicker.mdx b/src/components/Form/fields/FieldContrastColorPicker.mdx
new file mode 100644
index 000000000..6ad9642a8
--- /dev/null
+++ b/src/components/Form/fields/FieldContrastColorPicker.mdx
@@ -0,0 +1,81 @@
+import {Primary, Controls, Stories, Meta} from '@storybook/blocks';
+import * as FieldContrastColorPickerStories from './FieldContrastColorPicker.stories.js';
+
+<Meta of={FieldContrastColorPickerStories} />
+
+# FieldContrastColorPicker
+
+This component provides a dual color picker interface for selecting a color pair with optimal contrast. It's specifically designed for theme configuration where text readability is important.
+
+## Usage
+
+Use this component when you need users to select two colors that work well together for accessibility purposes, such as text color against a background. The component:
+
+- Allows selection of two colors (typically primary/background and secondary/text colors)
+- Displays the calculated contrast ratio between the selected colors
+- Shows visual indicators for WCAG accessibility compliance levels
+- Provides keyboard accessibility for color selection
+- Includes a link to documentation about contrast ratios and accessibility
+
+## Why Contrast Matters
+
+Color contrast is a critical aspect of web accessibility. Insufficient contrast between text and background colors can make content difficult or impossible to read for many users, including those with:
+
+- Low vision
+- Color blindness
+- Age-related vision changes
+- Situational limitations (e.g., bright sunlight on screens)
+
+The Web Content Accessibility Guidelines (WCAG) establish minimum contrast ratios to ensure readability:
+
+- **3:1** - Minimum for large text (18pt+) at Level AA
+- **4.5:1** - Minimum for normal text at Level AA
+- **7:1** - Enhanced contrast for normal text at Level AAA
+
+The component visually indicates whether selected colors meet these standards, helping content creators ensure their designs are accessible to all users.
+
+## Features
+
+- Two color pickers with hex color selection
+- Live preview of text appearance with the selected colors
+- Real-time contrast ratio calculation
+- Visual indicators for WCAG accessibility compliance levels
+- Keyboard navigation support for better accessibility
+- Documentation link for learning more about contrast requirements
+
+## Technical Details
+
+### Data Structure
+
+The component stores both colors in a JSON string format:
+
+```json
+{
+	"color1": "#1E6292",
+	"color2": "#FFFFFF"
+}
+```
+
+### WCAG Compliance
+
+The component uses the WCAG formula to calculate luminance and contrast between colors:
+
+- Relative luminance is calculated using the formula specified in WCAG 2.0
+- Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance
+
+### Keyboard Accessibility
+
+The component supports keyboard navigation for color selection:
+
+- Arrow keys: Adjust saturation and brightness
+- Page Up/Down: Adjust hue
+- Tab: Navigate between color pickers and other interactive elements
+
+### Events
+
+- `change`: Emitted when either color changes, with the stringified JSON value
+- `update:contrastColor`: Emitted when the second color is updated
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/components/Form/fields/FieldContrastColorPicker.stories.js b/src/components/Form/fields/FieldContrastColorPicker.stories.js
new file mode 100644
index 000000000..834e21fda
--- /dev/null
+++ b/src/components/Form/fields/FieldContrastColorPicker.stories.js
@@ -0,0 +1,105 @@
+import FieldContrastColorPicker from './FieldContrastColorPicker.vue';
+import FieldBaseMock from '../mocks/field-base';
+import FieldContrastColorPickerMock from '../mocks/field-contrast-color-picker';
+
+export default {
+	title: 'Forms/FieldContrastColorPicker',
+	component: FieldContrastColorPicker,
+	render: (args) => ({
+		components: {FieldContrastColorPicker},
+		setup() {
+			function change(name, prop, newValue, localeKey) {
+				if (localeKey) {
+					args[prop][localeKey] = newValue;
+				} else {
+					args[prop] = newValue;
+				}
+				console.log('Value changed:', newValue);
+			}
+
+			function updateContrastColor(color) {
+				console.log('Contrast color selected:', color);
+			}
+
+			return {args, change, updateContrastColor};
+		},
+		template: `
+			<FieldContrastColorPicker
+				v-bind="args"
+				@change="change"
+				@update:contrastColor="updateContrastColor"
+			/>
+		`,
+	}),
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'A color picker component that helps users select color combinations with sufficient contrast for accessibility compliance. Includes accessibility features like keyboard navigation and WCAG contrast validation.',
+			},
+		},
+	},
+};
+
+export const Base = {
+	args: {...FieldBaseMock, ...FieldContrastColorPickerMock},
+};
+
+export const Required = {
+	args: {
+		...Base.args,
+		isRequired: true,
+	},
+};
+
+export const WithTooltip = {
+	args: {
+		...Base.args,
+		tooltip:
+			'Select colors with a contrast ratio of at least 4.5:1 for normal text to ensure readability.',
+	},
+};
+
+export const WithDescription = {
+	args: {
+		...Base.args,
+		description:
+			'This color picker helps ensure your text is readable by checking contrast against WCAG standards. For more information, click the link below the contrast categories.',
+	},
+};
+
+export const WithHighContrast = {
+	args: {
+		...Base.args,
+		value: JSON.stringify({
+			color1: '#000000',
+			color2: '#ffffff',
+		}),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Example with maximum contrast (black and white), which passes all WCAG accessibility levels.',
+			},
+		},
+	},
+};
+
+export const WithLowContrast = {
+	args: {
+		...Base.args,
+		value: JSON.stringify({
+			color1: '#777777',
+			color2: '#999999',
+		}),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Example with insufficient contrast that fails to meet WCAG accessibility levels, showing the visual indicators for failed tests.',
+			},
+		},
+	},
+};
diff --git a/src/components/Form/fields/FieldContrastColorPicker.vue b/src/components/Form/fields/FieldContrastColorPicker.vue
new file mode 100644
index 000000000..d222aa60a
--- /dev/null
+++ b/src/components/Form/fields/FieldContrastColorPicker.vue
@@ -0,0 +1,1212 @@
+<template>
+	<fieldset class="pkpFormField pkpFormField--contrastColor">
+		<legend class="pkpFormField__heading--legend">
+			<template v-if="localeLabel">
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
+				<span class="-screenReader">{{ multilingualLabel }}</span>
+			</template>
+			<template v-else>
+				<span class="align-middle">{{ label }}</span>
+			</template>
+			<span v-if="isRequired" class="pkpFormFieldLabel__required">
+				*
+				<span class="-screenReader">{{ componentKeys.required }}</span>
+			</span>
+			<Tooltip
+				v-if="isPrimaryLocale && tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+			/>
+			<span
+				v-if="isPrimaryLocale && tooltip"
+				:id="describedByTooltipId"
+				class="-screenReader"
+			>
+				{{ tooltip }}
+			</span>
+			<HelpButton
+				v-if="isPrimaryLocale && helpTopic"
+				:id="describedByHelpId"
+				:topic="helpTopic"
+				:section="helpSection"
+				:label="componentKeys.help"
+			/>
+		</legend>
+		<div
+			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
+			class="pkpFormField__description"
+		>
+			{{ description }}
+		</div>
+		<div class="pkpFormField__control">
+			<div class="pkpFormField__threeColumnsRow">
+				<div class="pkpFormField__colorPickerColumn">
+					<div class="pkpFormField__colorPickerLabel">
+						{{ componentKeys.color1 }}
+					</div>
+					<div class="pkpFormField__colorPickerWrapper">
+						<div
+							class="pkpFormField__customSaturationBox"
+							tabindex="0"
+							:style="{background: `hsl(${hueValues.color1}, 100%, 50%)`}"
+							:aria-label="componentKeys.saturationValue + ' 1'"
+							@mousedown="startCustomSatValueDrag($event, 'color1')"
+							@touchstart="startCustomSatValueDrag($event, 'color1')"
+							@keydown="handleCustomSatValueKeydown($event, 'color1')"
+							@focus="handleFocus('color1')"
+							@blur="handleBlur('color1')"
+						>
+							<div class="pkpFormField__customSaturationBox--white"></div>
+							<div class="pkpFormField__customSaturationBox--black"></div>
+							<div
+								class="pkpFormField__customSaturationPointer"
+								:style="{
+									left: `${satValues.color1}%`,
+									top: `${100 - valueValues.color1}%`,
+								}"
+							>
+								<div class="pkpFormField__customSaturationCircle"></div>
+							</div>
+						</div>
+						<div class="pkpFormField__huePreviewRow">
+							<div
+								class="pkpFormField__colorPreview"
+								:style="{backgroundColor: color1.hex}"
+								:aria-label="componentKeys.preview + ' 1'"
+							></div>
+							<div
+								class="pkpFormField__customHueSlider"
+								tabindex="0"
+								:aria-label="componentKeys.hueSlider + ' 1'"
+								@click="handleCustomHueClick($event, 'color1')"
+								@mousedown="startCustomHueDrag($event, 'color1')"
+								@touchstart="startCustomHueDrag($event, 'color1')"
+								@keydown="handleCustomHueKeydown($event, 'color1')"
+							>
+								<div
+									class="pkpFormField__customHueHandle"
+									:style="{left: `${(hueValues.color1 / 360) * 100}%`}"
+								></div>
+							</div>
+						</div>
+						<div class="pkpFormField__inputFormatRow">
+							<div class="pkpFormField__formatArrows">
+								<button
+									type="button"
+									class="pkpFormField__formatArrowUp"
+									aria-label="Previous color format"
+									@click="cycleColorFormat('color1', -1)"
+								>
+									<span aria-hidden="true">▲</span>
+								</button>
+								<button
+									type="button"
+									class="pkpFormField__formatArrowDown"
+									aria-label="Next color format"
+									@click="cycleColorFormat('color1', 1)"
+								>
+									<span aria-hidden="true">▼</span>
+								</button>
+							</div>
+							<input
+								:value="getFormattedColorValue('color1')"
+								class="pkpFormField__colorValueInput"
+								type="text"
+								:aria-label="componentKeys.format + ' 1'"
+								@input="handleColorValueInput($event, 'color1')"
+								@focus="handleFocus('color1')"
+								@blur="handleBlur('color1')"
+							/>
+						</div>
+						<div class="pkpFormField__formatLabel">
+							{{ componentKeys[colorFormats.color1] }}
+						</div>
+						<div
+							aria-live="polite"
+							class="pkpFormField__a11yAnnouncer"
+							aria-atomic="true"
+						>
+							<span v-if="shouldAnnounceColor('color1')">
+								{{ getColorFormatAnnouncement('color1') }}
+							</span>
+						</div>
+					</div>
+				</div>
+				<div class="pkpFormField__colorPickerColumn">
+					<div class="pkpFormField__colorPickerLabel">
+						{{ componentKeys.color2 }}
+					</div>
+					<div class="pkpFormField__colorPickerWrapper">
+						<div
+							class="pkpFormField__customSaturationBox"
+							tabindex="0"
+							:style="{background: `hsl(${hueValues.color2}, 100%, 50%)`}"
+							:aria-label="componentKeys.saturationValue + ' 2'"
+							@mousedown="startCustomSatValueDrag($event, 'color2')"
+							@touchstart="startCustomSatValueDrag($event, 'color2')"
+							@keydown="handleCustomSatValueKeydown($event, 'color2')"
+							@focus="handleFocus('color2')"
+							@blur="handleBlur('color2')"
+						>
+							<div class="pkpFormField__customSaturationBox--white"></div>
+							<div class="pkpFormField__customSaturationBox--black"></div>
+							<div
+								class="pkpFormField__customSaturationPointer"
+								:style="{
+									left: `${satValues.color2}%`,
+									top: `${100 - valueValues.color2}%`,
+								}"
+							>
+								<div class="pkpFormField__customSaturationCircle"></div>
+							</div>
+						</div>
+						<div class="pkpFormField__huePreviewRow">
+							<div
+								class="pkpFormField__colorPreview"
+								:style="{backgroundColor: color2.hex}"
+								:aria-label="componentKeys.preview + ' 2'"
+							></div>
+							<div
+								class="pkpFormField__customHueSlider"
+								tabindex="0"
+								:aria-label="componentKeys.hueSlider + ' 2'"
+								@click="handleCustomHueClick($event, 'color2')"
+								@mousedown="startCustomHueDrag($event, 'color2')"
+								@touchstart="startCustomHueDrag($event, 'color2')"
+								@keydown="handleCustomHueKeydown($event, 'color2')"
+							>
+								<div
+									class="pkpFormField__customHueHandle"
+									:style="{left: `${(hueValues.color2 / 360) * 100}%`}"
+								></div>
+							</div>
+						</div>
+						<div class="pkpFormField__inputFormatRow">
+							<div class="pkpFormField__formatArrows">
+								<button
+									type="button"
+									class="pkpFormField__formatArrowUp"
+									aria-label="Previous color format"
+									@click="cycleColorFormat('color2', -1)"
+								>
+									<span aria-hidden="true">▲</span>
+								</button>
+								<button
+									type="button"
+									class="pkpFormField__formatArrowDown"
+									aria-label="Next color format"
+									@click="cycleColorFormat('color2', 1)"
+								>
+									<span aria-hidden="true">▼</span>
+								</button>
+							</div>
+							<input
+								:value="getFormattedColorValue('color2')"
+								class="pkpFormField__colorValueInput"
+								type="text"
+								:aria-label="componentKeys.format + ' 2'"
+								@input="handleColorValueInput($event, 'color2')"
+								@focus="handleFocus('color2')"
+								@blur="handleBlur('color2')"
+							/>
+						</div>
+						<div class="pkpFormField__formatLabel">
+							{{ componentKeys[colorFormats.color2] }}
+						</div>
+						<div
+							aria-live="polite"
+							class="pkpFormField__a11yAnnouncer"
+							aria-atomic="true"
+						>
+							<span v-if="shouldAnnounceColor('color2')">
+								{{ getColorFormatAnnouncement('color2') }}
+							</span>
+						</div>
+					</div>
+				</div>
+				<div class="pkpFormField__contrastValueColumn">
+					<div class="pkpFormField__colorPickerLabel">
+						{{ componentKeys.contrastRatio }}
+					</div>
+					<div
+						class="pkpFormField__textSample"
+						:style="{backgroundColor: color1.hex, color: color2.hex}"
+						aria-label="Text preview with selected colors"
+					>
+						<span class="pkpFormField__textSampleContent">Text</span>
+					</div>
+					<div class="pkpFormField__contrastValueDisplay">
+						<span class="pkpFormField__contrastValueNumber">
+							{{ currentContrast.toFixed(2) }}
+						</span>
+					</div>
+
+					<div class="pkpFormField__contrastCategoriesInColumn">
+						<div
+							v-for="category in contrastCategories"
+							:key="category.value"
+							class="pkpFormField__contrastCategory"
+							:class="{
+								'pkpFormField__contrastCategory--pass':
+									currentContrast >= category.value,
+								'pkpFormField__contrastCategory--fail':
+									currentContrast < category.value,
+							}"
+							:aria-label="`${category.label}: ${currentContrast >= category.value ? 'Pass' : 'Fail'}`"
+						>
+							{{ category.label }}
+							<span class="pkpFormField__contrastCategoryIcon">
+								<span
+									v-if="currentContrast >= category.value"
+									class="fa fa-check"
+								></span>
+								<span v-else class="fa fa-times"></span>
+							</span>
+						</div>
+					</div>
+					<div
+						aria-live="polite"
+						class="pkpFormField__a11yAnnouncer"
+						aria-atomic="true"
+					>
+						<span v-if="shouldAnnounceContrast()">
+							{{ getContrastAnnouncement() }}
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="pkpFormField__accessibilityInfoRow">
+				<div class="pkpFormField__accessibilityInfo">
+					<a
+						href="https://docs.pkp.sfu.ca/accessible-content/en/principles#contrast-ratio"
+						target="_blank"
+						rel="noopener"
+						:aria-label="
+							componentKeys.contrastGuideText +
+							' ' +
+							componentKeys.opensInNewWindowText
+						"
+					>
+						{{ componentKeys.contrastGuideText }}
+						<span class="pkpFormField__newWindowNotice">
+							<span class="fa fa-external-link" aria-hidden="true"></span>
+							<span class="pkpFormField__srOnly">
+								{{ componentKeys.opensInNewWindowText }}
+							</span>
+						</span>
+					</a>
+				</div>
+			</div>
+
+			<FieldError
+				v-if="errors && errors.length"
+				:id="describedByErrorId"
+				:messages="errors"
+			/>
+		</div>
+	</fieldset>
+</template>
+
+<script>
+import FieldBase from './FieldBase.vue';
+import Tooltip from '@/components/Tooltip/Tooltip.vue';
+import HelpButton from '@/components/HelpButton/HelpButton.vue';
+import FieldError from '@/components/Form/FieldError.vue';
+
+export default {
+	name: 'FieldContrastColorPicker',
+	components: {
+		Tooltip,
+		HelpButton,
+		FieldError,
+	},
+	extends: FieldBase,
+	data() {
+		return {
+			color1: {hex: '#1E6292'},
+			color2: {hex: '#FFFFFF'},
+			currentContrast: 0,
+			contrastCategories: [
+				{value: 3, label: this.t('common.colorPicker.AALargeText')},
+				{value: 4.5, label: this.t('common.colorPicker.AANormalText')},
+				{value: 7, label: this.t('common.colorPicker.AAANormalText')},
+			],
+			keyboardStep: 1,
+			keyboardHueStep: 2,
+			keyboardSatStep: 5,
+			hueValues: {
+				color1: 210,
+				color2: 0,
+			},
+			satValues: {
+				color1: 100,
+				color2: 0,
+			},
+			valueValues: {
+				color1: 60,
+				color2: 100,
+			},
+			isDraggingHue: false,
+			isDraggingSat: false,
+			currentDragTarget: null,
+			colorFormats: {
+				color1: 'hex',
+				color2: 'hex',
+			},
+			lastUpdated: null,
+			focused: {
+				color1: false,
+				color2: false,
+			},
+			previousColors: {
+				color1: '#1E6292',
+				color2: '#FFFFFF',
+			},
+			debounceTimer: null,
+			// Preloaded translation keys for SSR
+			componentKeys: {
+				required: this.t('common.required'),
+				help: this.t('help.help'),
+				color1: this.t('common.colorPicker.color1'),
+				color2: this.t('common.colorPicker.color2'),
+				saturationValue: this.t('common.colorPicker.saturationValue'),
+				preview: this.t('common.colorPicker.preview'),
+				hueSlider: this.t('common.colorPicker.hueSlider'),
+				format: this.t('common.colorPicker.format'),
+				hex: this.t('common.colorPicker.hex'),
+				rgb: this.t('common.colorPicker.rgb'),
+				rgba: this.t('common.colorPicker.rgba'),
+				hsl: this.t('common.colorPicker.hsl'),
+				hsv: this.t('common.colorPicker.hsv'),
+				contrastRatio: this.t('common.colorPicker.contrastRatio'),
+				contrastGuideText: this.t('common.colorPicker.contrastGuideText'),
+				colorFormatChanged: this.t('common.colorPicker.colorFormatChanged'),
+				contrastRatioAnnouncement: this.t(
+					'common.colorPicker.contrastRatioAnnouncement',
+				),
+				levelAccessible: this.t('common.colorPicker.levelAccessible'),
+				levelNotAccessible: this.t('common.colorPicker.levelNotAccessible'),
+				opensInNewWindowText: this.t('common.colorPicker.opensInNewWindowText'),
+			},
+		};
+	},
+	mounted() {
+		if (this.color1 && this.color1.hex) {
+			const hsv1 = this.hexToHsv(this.color1.hex);
+			this.hueValues.color1 = hsv1.h;
+			this.satValues.color1 = hsv1.s;
+			this.valueValues.color1 = hsv1.v;
+		}
+
+		if (this.color2 && this.color2.hex) {
+			const hsv2 = this.hexToHsv(this.color2.hex);
+			this.hueValues.color2 = hsv2.h;
+			this.satValues.color2 = hsv2.s;
+			this.valueValues.color2 = hsv2.v;
+		}
+
+		document.addEventListener('mousemove', this.handleCustomHueDrag);
+		document.addEventListener('touchmove', this.handleCustomHueDrag);
+		document.addEventListener('mouseup', this.endCustomHueDrag);
+		document.addEventListener('touchend', this.endCustomHueDrag);
+
+		this.checkContrast();
+	},
+	beforeUnmount() {
+		document.removeEventListener('mousemove', this.handleCustomHueDrag);
+		document.removeEventListener('touchmove', this.handleCustomHueDrag);
+		document.removeEventListener('mouseup', this.endCustomHueDrag);
+		document.removeEventListener('touchend', this.endCustomHueDrag);
+	},
+	created() {
+		if (this.currentValue) {
+			try {
+				if (
+					typeof this.currentValue === 'string' &&
+					(this.currentValue.startsWith('{') ||
+						this.currentValue.startsWith('['))
+				) {
+					const values = JSON.parse(this.currentValue);
+					if (values && values.color1 && values.color2) {
+						this.color1 = {hex: values.color1};
+						this.color2 = {hex: values.color2};
+					}
+				} else if (
+					typeof this.currentValue === 'string' &&
+					this.currentValue.startsWith('#')
+				) {
+					this.color1 = {hex: this.currentValue};
+				}
+			} catch (e) {
+				console.error('Error parsing field value:', e);
+				if (
+					typeof this.currentValue === 'string' &&
+					this.currentValue.startsWith('#')
+				) {
+					this.color1 = {hex: this.currentValue};
+				}
+			}
+		}
+
+		if (this.$filters && !this.$filters.t('common.colorPicker.preview')) {
+			this.$filters.add('t', (value, params) => {
+				if (value === 'common.colorPicker.preview') {
+					return 'Color preview';
+				}
+				return value;
+			});
+		}
+
+		this.$nextTick(() => {
+			this.checkContrast();
+		});
+	},
+	methods: {
+		/**
+		 * Get formatted color value based on selected format
+		 *
+		 * @param {String} colorId - Which color (color1 or color2)
+		 * @return {String} Formatted color value
+		 */
+		getFormattedColorValue(colorId) {
+			const color = colorId === 'color1' ? this.color1 : this.color2;
+			const format = this.colorFormats[colorId];
+			const hexColor = color.hex;
+			const rgb = this.hexToRgb(hexColor);
+
+			if (!rgb) return '';
+
+			const h = this.hueValues[colorId];
+			const s = this.satValues[colorId];
+			const v = this.valueValues[colorId];
+
+			const r = Math.round(rgb.r * 255);
+			const g = Math.round(rgb.g * 255);
+			const b = Math.round(rgb.b * 255);
+
+			switch (format) {
+				case 'hex':
+					return hexColor;
+				case 'rgb':
+					return `rgb(${r}, ${g}, ${b})`;
+				case 'rgba':
+					return `rgba(${r}, ${g}, ${b}, 1)`;
+				case 'hsl': {
+					const l = v * (1 - s / 200);
+					const sat =
+						l === 0 || l === 1 ? 0 : ((v - l) / Math.min(l, 1 - l)) * 100;
+					return `hsl(${h}, ${Math.round(sat)}%, ${Math.round(l * 100)}%)`;
+				}
+				case 'hsv':
+					return `hsv(${h}, ${s}%, ${v}%)`;
+				default:
+					return hexColor;
+			}
+		},
+
+		/**
+		 * Handle input from color value field
+		 *
+		 * @param {Event} event - Input event
+		 * @param {String} colorId - Which color (color1 or color2)
+		 */
+		handleColorValueInput(event, colorId) {
+			const inputValue = event.target.value.trim();
+			const format = this.colorFormats[colorId];
+			let newHex = null;
+
+			let rgbMatch, rgbaMatch, hslMatch, hsvMatch;
+			let r, g, b, h, s, l, v, sv;
+
+			try {
+				switch (format) {
+					case 'hex':
+						if (/^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(inputValue)) {
+							newHex = inputValue;
+						}
+						break;
+
+					case 'rgb':
+						rgbMatch = inputValue.match(
+							/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/,
+						);
+						if (rgbMatch) {
+							r = parseInt(rgbMatch[1]) / 255;
+							g = parseInt(rgbMatch[2]) / 255;
+							b = parseInt(rgbMatch[3]) / 255;
+							newHex = this.rgbToHex(r, g, b);
+						}
+						break;
+
+					case 'rgba':
+						rgbaMatch = inputValue.match(
+							/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/,
+						);
+						if (rgbaMatch) {
+							r = parseInt(rgbaMatch[1]) / 255;
+							g = parseInt(rgbaMatch[2]) / 255;
+							b = parseInt(rgbaMatch[3]) / 255;
+							newHex = this.rgbToHex(r, g, b);
+						}
+						break;
+
+					case 'hsl':
+						hslMatch = inputValue.match(
+							/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/,
+						);
+						if (hslMatch) {
+							h = parseInt(hslMatch[1]);
+							s = parseInt(hslMatch[2]);
+							l = parseInt(hslMatch[3]);
+
+							v = l + (s * Math.min(l, 100 - l)) / 100;
+							sv = s === 0 ? 0 : (200 * (v - l)) / v;
+
+							newHex = this.hsvToHex({h, s: sv, v});
+						}
+						break;
+
+					case 'hsv':
+						hsvMatch = inputValue.match(
+							/hsv\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/,
+						);
+						if (hsvMatch) {
+							h = parseInt(hsvMatch[1]);
+							s = parseInt(hsvMatch[2]);
+							v = parseInt(hsvMatch[3]);
+							newHex = this.hsvToHex({h, s, v});
+						}
+						break;
+				}
+
+				if (newHex) {
+					const previousColor =
+						colorId === 'color1' ? this.color1.hex : this.color2.hex;
+
+					if (colorId === 'color1') {
+						this.color1.hex = newHex;
+					} else {
+						this.color2.hex = newHex;
+					}
+
+					const hsv = this.hexToHsv(newHex);
+					this.hueValues[colorId] = hsv.h;
+					this.satValues[colorId] = hsv.s;
+					this.valueValues[colorId] = hsv.v;
+
+					this.updateValue();
+					this.debouncedCheckContrast();
+
+					if (previousColor !== newHex) {
+						this.lastUpdated = colorId;
+						this.previousColors[colorId] = newHex;
+					}
+				}
+			} catch (e) {
+				console.error('Error parsing color input:', e);
+			}
+		},
+
+		/**
+		 * Convert RGB to hex
+		 *
+		 * @param {Number} r - Red (0-1)
+		 * @param {Number} g - Green (0-1)
+		 * @param {Number} b - Blue (0-1)
+		 * @return {String} Hex color
+		 */
+		rgbToHex(r, g, b) {
+			const toHex = (x) => {
+				const hex = Math.round(x * 255).toString(16);
+				return hex.length === 1 ? '0' + hex : hex;
+			};
+
+			return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+		},
+
+		handleHexInput(colorId) {
+			const color = colorId === 'color1' ? this.color1 : this.color2;
+			const previousHex = color.hex;
+
+			let hex = color.hex.trim();
+
+			if (!hex.startsWith('#')) {
+				hex = '#' + hex;
+			}
+
+			if (!/^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(hex)) {
+				return;
+			}
+
+			if (colorId === 'color1') {
+				this.color1 = {hex};
+			} else {
+				this.color2 = {hex};
+			}
+
+			const hsv = this.hexToHsv(hex);
+			this.hueValues[colorId] = hsv.h;
+			this.satValues[colorId] = hsv.s;
+			this.valueValues[colorId] = hsv.v;
+
+			this.updateValue();
+			this.debouncedCheckContrast();
+
+			if (previousHex !== hex) {
+				this.lastUpdated = colorId;
+				this.previousColors[colorId] = hex;
+			}
+		},
+
+		handleCustomHueClick(event, colorId) {
+			const rect = event.currentTarget.getBoundingClientRect();
+			const x = event.clientX - rect.left;
+			const width = rect.width;
+			const hueValue = Math.round((x / width) * 360);
+
+			this.updateHueValue(colorId, hueValue);
+		},
+
+		startCustomHueDrag(event, colorId) {
+			if (event.preventDefault) {
+				event.preventDefault();
+			}
+
+			this.isDraggingHue = true;
+			this.currentDragTarget = colorId;
+
+			if (event.touches && event.touches[0]) {
+				const rect = event.currentTarget.getBoundingClientRect();
+				const x = event.touches[0].clientX - rect.left;
+				const width = rect.width;
+				const hueValue = Math.round((x / width) * 360);
+				this.updateHueValue(colorId, hueValue);
+			}
+		},
+
+		handleCustomHueDrag(event) {
+			if (!this.isDraggingHue || !this.currentDragTarget) return;
+
+			const sliderElement = document.querySelector(
+				`.pkpFormField__colorPickerColumn:nth-child(${this.currentDragTarget === 'color1' ? 1 : 2}) .pkpFormField__customHueSlider`,
+			);
+
+			if (!sliderElement) return;
+
+			const rect = sliderElement.getBoundingClientRect();
+			let x;
+
+			if (event.touches && event.touches[0]) {
+				x = event.touches[0].clientX - rect.left;
+			} else {
+				x = event.clientX - rect.left;
+			}
+
+			x = Math.max(0, Math.min(x, rect.width));
+
+			const width = rect.width;
+			const hueValue = Math.round((x / width) * 360);
+
+			this.updateHueValue(this.currentDragTarget, hueValue);
+		},
+
+		endCustomHueDrag() {
+			this.isDraggingHue = false;
+			this.currentDragTarget = null;
+		},
+
+		updateHueValue(colorId, hueValue) {
+			hueValue = Math.max(0, Math.min(359, hueValue));
+
+			this.hueValues[colorId] = hueValue;
+
+			const hsv = {
+				h: hueValue,
+				s: this.satValues[colorId],
+				v: this.valueValues[colorId],
+			};
+
+			const hex = this.hsvToHex(hsv);
+
+			if (colorId === 'color1') {
+				this.color1 = {hex};
+			} else {
+				this.color2 = {hex};
+			}
+
+			this.updateValue();
+			this.debouncedCheckContrast();
+
+			const currentColor =
+				colorId === 'color1' ? this.color1.hex : this.color2.hex;
+			if (this.previousColors[colorId] !== currentColor) {
+				this.lastUpdated = colorId;
+				this.previousColors[colorId] = currentColor;
+			}
+		},
+
+		handleCustomHueKeydown(event, colorId) {
+			let hueValue = this.hueValues[colorId];
+			let step = this.keyboardHueStep;
+			let modified = false;
+
+			switch (event.key) {
+				case 'ArrowRight':
+					hueValue = (hueValue + step) % 360;
+					modified = true;
+					break;
+				case 'ArrowLeft':
+					hueValue = (hueValue - step + 360) % 360;
+					modified = true;
+					break;
+				case 'Home':
+					hueValue = 0;
+					modified = true;
+					break;
+				case 'End':
+					hueValue = 359;
+					modified = true;
+					break;
+				case 'PageUp':
+					hueValue = (hueValue + 30) % 360;
+					modified = true;
+					break;
+				case 'PageDown':
+					hueValue = (hueValue - 30 + 360) % 360;
+					modified = true;
+					break;
+			}
+
+			if (modified) {
+				event.preventDefault();
+				this.updateHueValue(colorId, hueValue);
+			}
+		},
+
+		handleCustomSatValueKeydown(event, colorId) {
+			let s = this.satValues[colorId];
+			let v = this.valueValues[colorId];
+			let modified = false;
+
+			switch (event.key) {
+				case 'ArrowUp':
+					v = Math.min(100, v + this.keyboardStep);
+					modified = true;
+					break;
+				case 'ArrowDown':
+					v = Math.max(0, v - this.keyboardStep);
+					modified = true;
+					break;
+				case 'ArrowRight':
+					s = Math.min(100, s + this.keyboardStep);
+					modified = true;
+					break;
+				case 'ArrowLeft':
+					s = Math.max(0, s - this.keyboardStep);
+					modified = true;
+					break;
+				case 'Home':
+					s = 0;
+					v = 100;
+					modified = true;
+					break;
+				case 'End':
+					s = 100;
+					v = 0;
+					modified = true;
+					break;
+				case 'PageUp':
+					v = Math.min(100, v + 10);
+					modified = true;
+					break;
+				case 'PageDown':
+					v = Math.max(0, v - 10);
+					modified = true;
+					break;
+			}
+
+			if (modified) {
+				event.preventDefault();
+				this.updateSatValueValues(colorId, s, v);
+			}
+		},
+
+		startCustomSatValueDrag(event, colorId) {
+			if (event.preventDefault) {
+				event.preventDefault();
+			}
+
+			this.isDraggingSat = true;
+			this.currentDragTarget = colorId;
+
+			this.handleCustomSatValueDrag(event);
+
+			window.addEventListener('mousemove', this.handleCustomSatValueDrag);
+			window.addEventListener('mouseup', this.endCustomSatValueDrag);
+			window.addEventListener('touchmove', this.handleCustomSatValueDrag);
+			window.addEventListener('touchend', this.endCustomSatValueDrag);
+		},
+
+		handleCustomSatValueDrag(event) {
+			if (!this.isDraggingSat || !this.currentDragTarget) return;
+
+			const colorId = this.currentDragTarget;
+			const boxElement = document.querySelector(
+				`.pkpFormField__colorPickerColumn:nth-child(${colorId === 'color1' ? 1 : 2}) .pkpFormField__customSaturationBox`,
+			);
+
+			if (!boxElement) return;
+
+			const rect = boxElement.getBoundingClientRect();
+			let x, y;
+
+			if (event.touches && event.touches[0]) {
+				x = event.touches[0].clientX - rect.left;
+				y = event.touches[0].clientY - rect.top;
+			} else {
+				x = event.clientX - rect.left;
+				y = event.clientY - rect.top;
+			}
+
+			x = Math.max(0, Math.min(x, rect.width));
+			y = Math.max(0, Math.min(y, rect.height));
+
+			const s = Math.round((x / rect.width) * 100);
+			const v = Math.round(100 - (y / rect.height) * 100);
+
+			this.updateSatValueValues(colorId, s, v);
+		},
+
+		endCustomSatValueDrag() {
+			this.isDraggingSat = false;
+
+			if (!this.isDraggingHue) {
+				this.currentDragTarget = null;
+			}
+
+			window.removeEventListener('mousemove', this.handleCustomSatValueDrag);
+			window.removeEventListener('mouseup', this.endCustomSatValueDrag);
+			window.removeEventListener('touchmove', this.handleCustomSatValueDrag);
+			window.removeEventListener('touchend', this.endCustomSatValueDrag);
+		},
+
+		updateSatValueValues(colorId, satValue, valueValue) {
+			satValue = Math.max(0, Math.min(100, satValue));
+			valueValue = Math.max(0, Math.min(100, valueValue));
+
+			this.satValues[colorId] = satValue;
+			this.valueValues[colorId] = valueValue;
+
+			const hsv = {
+				h: this.hueValues[colorId],
+				s: satValue,
+				v: valueValue,
+			};
+
+			const hex = this.hsvToHex(hsv);
+			const previousHex =
+				colorId === 'color1' ? this.color1.hex : this.color2.hex;
+
+			if (colorId === 'color1') {
+				this.color1 = {hex};
+			} else {
+				this.color2 = {hex};
+			}
+
+			this.updateValue();
+			this.debouncedCheckContrast();
+
+			if (previousHex !== hex) {
+				this.lastUpdated = colorId;
+				this.previousColors[colorId] = hex;
+			}
+		},
+
+		updateValue() {
+			const valueObj = {
+				color1: this.color1.hex,
+				color2: this.color2.hex,
+			};
+
+			this.currentValue = JSON.stringify(valueObj);
+		},
+
+		checkContrast() {
+			const rgb1 = this.hexToRgb(this.color1.hex);
+			const rgb2 = this.hexToRgb(this.color2.hex);
+
+			if (!rgb1 || !rgb2) return;
+
+			const lum1 = this.calculateLuminance(rgb1.r, rgb1.g, rgb1.b);
+			const lum2 = this.calculateLuminance(rgb2.r, rgb2.g, rgb2.b);
+
+			const previousContrast = this.currentContrast;
+			this.currentContrast = this.calculateContrast(lum1, lum2);
+
+			this.updateValue();
+
+			if (previousContrast !== this.currentContrast) {
+				this.lastUpdated = 'contrast';
+			}
+		},
+
+		/**
+		 * Convert hex color to RGB
+		 *
+		 * @param {String} hex
+		 * @return {Object|null}
+		 */
+		hexToRgb(hex) {
+			const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+			return result
+				? {
+						r: parseInt(result[1], 16) / 255,
+						g: parseInt(result[2], 16) / 255,
+						b: parseInt(result[3], 16) / 255,
+					}
+				: null;
+		},
+
+		/**
+		 * Calculate relative luminance using WCAG formula
+		 *
+		 * @param {Number} r
+		 * @param {Number} g
+		 * @param {Number} b
+		 * @return {Number}
+		 */
+		calculateLuminance(r, g, b) {
+			const a = [r, g, b].map((v) => {
+				return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+			});
+			return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+		},
+
+		/**
+		 * Calculate contrast ratio between two luminance values
+		 *
+		 * @param {Number} l1
+		 * @param {Number} l2
+		 * @return {Number}
+		 */
+		calculateContrast(l1, l2) {
+			const lighter = Math.max(l1, l2);
+			const darker = Math.min(l1, l2);
+			return (lighter + 0.05) / (darker + 0.05);
+		},
+
+		/**
+		 * Convert hex color to HSV
+		 *
+		 * @param {String} hex - Hex color value
+		 * @return {Object} HSV object with h, s, v properties
+		 */
+		hexToHsv(hex) {
+			const rgb = this.hexToRgb(hex);
+			if (!rgb) return {h: 0, s: 0, v: 0};
+
+			const r = rgb.r;
+			const g = rgb.g;
+			const b = rgb.b;
+
+			const max = Math.max(r, g, b);
+			const min = Math.min(r, g, b);
+			const delta = max - min;
+
+			let h = 0;
+			let s = max === 0 ? 0 : delta / max;
+			let v = max;
+
+			if (delta > 0) {
+				if (max === r) {
+					h = ((g - b) / delta) % 6;
+				} else if (max === g) {
+					h = (b - r) / delta + 2;
+				} else {
+					h = (r - g) / delta + 4;
+				}
+
+				h = Math.round(h * 60);
+				if (h < 0) h += 360;
+			}
+
+			return {
+				h: h,
+				s: Math.round(s * 100),
+				v: Math.round(v * 100),
+			};
+		},
+
+		/**
+		 * Convert HSV color to hex
+		 *
+		 * @param {Object} hsv - HSV color object
+		 * @return {String} Hex color string
+		 */
+		hsvToHex(hsv) {
+			const h = hsv.h;
+			const s = hsv.s / 100;
+			const v = hsv.v / 100;
+
+			let r, g, b;
+
+			const i = Math.floor(h / 60) % 6;
+			const f = h / 60 - Math.floor(h / 60);
+			const p = v * (1 - s);
+			const q = v * (1 - f * s);
+			const t = v * (1 - (1 - f) * s);
+
+			switch (i) {
+				case 0:
+					r = v;
+					g = t;
+					b = p;
+					break;
+				case 1:
+					r = q;
+					g = v;
+					b = p;
+					break;
+				case 2:
+					r = p;
+					g = v;
+					b = t;
+					break;
+				case 3:
+					r = p;
+					g = q;
+					b = v;
+					break;
+				case 4:
+					r = t;
+					g = p;
+					b = v;
+					break;
+				default:
+					r = v;
+					g = p;
+					b = q;
+					break;
+			}
+
+			const toHex = (x) => {
+				const hex = Math.round(x * 255).toString(16);
+				return hex.length === 1 ? '0' + hex : hex;
+			};
+
+			return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+		},
+
+		/**
+		 * Get announcement text for color format change
+		 *
+		 * @param {String} colorId - Which color (color1 or color2)
+		 * @returns {String} - Announcement text
+		 */
+		getColorFormatAnnouncement(colorId) {
+			const colorName =
+				colorId === 'color1'
+					? this.componentKeys.color1
+					: this.componentKeys.color2;
+			const formatName = this.componentKeys[this.colorFormats[colorId]];
+			const colorValue = this.getFormattedColorValue(colorId);
+
+			return this.componentKeys.colorFormatChanged
+				.replace('{$colorName}', colorName)
+				.replace('{$formatName}', formatName)
+				.replace('{$colorValue}', colorValue);
+		},
+
+		/**
+		 * Get announcement text for contrast ratio
+		 *
+		 * @returns {String} - Announcement text
+		 */
+		getContrastAnnouncement() {
+			let announcement = this.componentKeys.contrastRatioAnnouncement.replace(
+				'{$ratio}',
+				this.currentContrast.toFixed(2),
+			);
+
+			for (const category of this.contrastCategories) {
+				const isAccessible = this.currentContrast >= category.value;
+				const accessibilityStatus = isAccessible
+					? this.componentKeys.levelAccessible
+					: this.componentKeys.levelNotAccessible;
+
+				announcement += ' ' + category.label + ' ' + accessibilityStatus + '.';
+			}
+
+			return announcement;
+		},
+
+		/**
+		 * Cycle through available color formats
+		 *
+		 * @param {String} colorId - Which color (color1 or color2)
+		 * @param {Number} direction - Direction to cycle (1 for next, -1 for previous)
+		 */
+		cycleColorFormat(colorId, direction) {
+			const formats = ['hex', 'rgb', 'rgba', 'hsl', 'hsv'];
+			const currentIndex = formats.indexOf(this.colorFormats[colorId]);
+			let newIndex = currentIndex + direction;
+
+			if (newIndex < 0) {
+				newIndex = formats.length - 1;
+			} else if (newIndex >= formats.length) {
+				newIndex = 0;
+			}
+
+			this.colorFormats[colorId] = formats[newIndex];
+			this.lastUpdated = colorId;
+		},
+
+		handleFocus(colorId) {
+			this.focused[colorId] = true;
+			this.previousColors[colorId] =
+				colorId === 'color1' ? this.color1.hex : this.color2.hex;
+		},
+
+		handleBlur(colorId) {
+			this.focused[colorId] = false;
+		},
+
+		shouldAnnounceColor(colorId) {
+			const currentColor =
+				colorId === 'color1' ? this.color1.hex : this.color2.hex;
+			// On first focus, announce even if no change
+			if (this.focused[colorId] && this.lastUpdated === null) {
+				return true;
+			}
+			// For subsequent changes, only announce if color actually changed
+			return (
+				this.lastUpdated === colorId &&
+				this.previousColors[colorId] !== currentColor
+			);
+		},
+
+		shouldAnnounceContrast() {
+			// Only announce contrast changes after debounce
+			return this.lastUpdated === 'contrast' && this.debounceTimer === null;
+		},
+
+		debouncedCheckContrast() {
+			if (this.debounceTimer) {
+				clearTimeout(this.debounceTimer);
+			}
+
+			this.debounceTimer = setTimeout(() => {
+				this.checkContrast();
+				this.debounceTimer = null;
+			}, 300); // 300ms debounce
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/components/field-contrast-color-picker.less';
+</style>
diff --git a/src/components/Form/mocks/field-contrast-color-picker.js b/src/components/Form/mocks/field-contrast-color-picker.js
new file mode 100644
index 000000000..a9477a450
--- /dev/null
+++ b/src/components/Form/mocks/field-contrast-color-picker.js
@@ -0,0 +1,11 @@
+export default {
+	name: 'contrastColorPicker',
+	component: 'field-contrast-color-picker',
+	label: 'Choose Color Combination',
+	description:
+		'Select two colors with good contrast for accessibility. The contrast ratio should meet WCAG guidelines for text readability. Use keyboard navigation or mouse to adjust colors.',
+	value: JSON.stringify({
+		color1: '#1E6292',
+		color2: '#FFFFFF',
+	}),
+};
diff --git a/src/styles/components/field-contrast-color-picker.less b/src/styles/components/field-contrast-color-picker.less
new file mode 100644
index 000000000..b615861bd
--- /dev/null
+++ b/src/styles/components/field-contrast-color-picker.less
@@ -0,0 +1,401 @@
+.pkpFormField--contrastColor {
+	padding: 0;
+	border: none;
+	max-width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.pkpFormField__heading--legend {
+	font-weight: 700;
+}
+
+.pkpFormField {
+	&__threeColumnsRow {
+		display: flex;
+		gap: 12px;
+		width: 100%;
+		max-width: 100%;
+		overflow: hidden;
+		flex-wrap: wrap;
+	}
+
+	&__colorPickerColumn {
+		flex: 1;
+		max-width: calc(37% - 12px);
+		min-width: 160px;
+		display: flex;
+		flex-direction: column;
+		height: 340px;
+	}
+
+	&__contrastValueColumn {
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 180px;
+		gap: 8px;
+		height: 340px;
+		justify-content: space-between;
+	}
+
+	&__colorPickerLabel {
+		font-weight: 700;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__keyboardInstructions {
+		margin-top: 8px;
+		font-size: 11px;
+		color: #666;
+		font-style: italic;
+	}
+
+	&__textSample {
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 50px;
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+		border: 1px solid #ddd;
+	}
+
+	&__textSampleContent {
+		font-size: 16px;
+		font-weight: 700;
+		text-align: center;
+	}
+
+	&__contrastValueDisplay {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #f8f8f8;
+		border-radius: 4px;
+		padding: 12px;
+		height: 50px;
+		margin-bottom: 16px;
+	}
+
+	&__contrastValueNumber {
+		font-weight: 700;
+		font-size: 20px;
+	}
+
+	&__contrastCategoriesInColumn {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		margin-bottom: 0;
+		flex-grow: 1;
+	}
+
+	&__contrastCategory {
+		text-align: left;
+		padding: 8px;
+		border-radius: 4px;
+		font-weight: 600;
+		font-size: 11px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&--pass {
+			background-color: rgba(0, 178, 141, 0.15);
+			color: #007a60;
+		}
+
+		&--fail {
+			background-color: rgba(208, 10, 108, 0.15);
+			color: #b00058;
+		}
+	}
+
+	&__contrastCategoryIcon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		.fa-check {
+			color: #007a60;
+		}
+
+		.fa-times {
+			color: #b00058;
+		}
+	}
+
+	&__accessibilityInfoRow {
+		display: flex;
+		justify-content: flex-start;
+		margin-bottom: 16px;
+	}
+
+	&__accessibilityInfo {
+		font-size: 12px;
+
+		a {
+			color: #007bff;
+			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				text-decoration: underline;
+			}
+
+			&:focus {
+				outline: 2px solid #1976d2;
+				outline-offset: 2px;
+			}
+		}
+	}
+
+	&__colorPickerWrapper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	&__customSaturationBox {
+		position: relative;
+		width: 100%;
+		height: 100px;
+		margin: 10px auto 15px;
+		border-radius: 4px;
+		overflow: hidden;
+		cursor: pointer;
+		outline: none;
+		box-sizing: border-box;
+
+		&:focus {
+			box-shadow: 0 0 0 2px #1976d2;
+		}
+	}
+
+	&__huePreviewRow {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		gap: 10px;
+		margin-bottom: 10px;
+	}
+
+	&__customHueSlider {
+		position: relative;
+		height: 14px;
+		cursor: pointer;
+		background: linear-gradient(
+			to right,
+			#f00 0%,
+			#ff0 17%,
+			#0f0 33%,
+			#0ff 50%,
+			#00f 67%,
+			#f0f 83%,
+			#f00 100%
+		);
+		border-radius: 4px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		outline: none;
+		box-sizing: border-box;
+		flex: 1;
+		max-width: calc(100% - 30px);
+	}
+
+	&__colorPreview {
+		width: 22px;
+		height: 22px;
+		border-radius: 50%;
+		border: 1px solid #ddd;
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+		flex-shrink: 0;
+	}
+
+	&__inputFormatRow {
+		display: flex;
+		align-items: center;
+		margin: 0 auto 5px;
+		width: 100%;
+		box-sizing: border-box;
+		flex-wrap: nowrap;
+		overflow: hidden;
+	}
+
+	&__formatArrows {
+		display: flex;
+		flex-direction: column;
+		margin-right: 4px;
+		height: 28px;
+	}
+
+	&__formatArrowUp,
+	&__formatArrowDown {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+		height: 14px;
+		width: 20px;
+		line-height: 8px;
+		font-size: 10px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #666;
+
+		&:hover {
+			color: #1976d2;
+		}
+
+		&:focus {
+			outline: 1px solid #1976d2;
+			color: #1976d2;
+		}
+	}
+
+	&__formatLabel {
+		font-size: 11px;
+		color: #666;
+		text-align: left;
+		margin-bottom: 10px;
+		letter-spacing: 0.5px;
+		padding-left: 24px;
+	}
+
+	&__colorValueInput {
+		flex: 1;
+		padding: 4px 8px;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+		font-family: monospace;
+		font-size: 12px;
+		height: 28px;
+		box-sizing: border-box;
+
+		&:focus {
+			outline: 2px solid #1976d2;
+			outline-offset: -1px;
+			border-color: #1976d2;
+		}
+	}
+
+	&__control {
+		max-width: 100%;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	&__customHueHandle {
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		border: 2px solid #fff;
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+		background: #fff;
+		transform: translate(-50%, -1px);
+		pointer-events: none;
+	}
+
+	&__customHueSlider:focus {
+		box-shadow: 0 0 0 2px #1976d2;
+	}
+
+	&__customSaturationBox--white,
+	&__customSaturationBox--black {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		pointer-events: none;
+	}
+
+	&__customSaturationBox--white {
+		background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+	}
+
+	&__customSaturationBox--black {
+		background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+	}
+
+	&__customSaturationPointer {
+		position: absolute;
+		cursor: pointer;
+		transform: translate(-4px, -4px);
+	}
+
+	&__customSaturationCircle {
+		width: 8px;
+		height: 8px;
+		box-shadow:
+			0 0 0 1.5px #fff,
+			inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+			0 0 1px 2px rgba(0, 0, 0, 0.4);
+		border-radius: 50%;
+		cursor: pointer;
+		transform-origin: center;
+		transition: transform 0.1s ease;
+	}
+
+	&__customSaturationBox:focus &__customSaturationCircle {
+		transform: scale(1.2);
+		box-shadow:
+			0 0 0 1.5px #fff,
+			0 0 0 3px #1976d2,
+			inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
+	}
+
+	&__a11yAnnouncer {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+}
+
+@media (max-width: 767px) {
+	.pkpFormField {
+		&__threeColumnsRow {
+			flex-direction: column;
+		}
+
+		&__colorPickerColumn {
+			max-width: 100%;
+			height: auto;
+			margin-bottom: 20px;
+		}
+
+		&__contrastValueColumn {
+			max-width: 100%;
+			flex: 1;
+			height: auto;
+		}
+
+		&__formatSelector {
+			flex-wrap: wrap;
+		}
+
+		&__formatSelect,
+		&__colorValueInput {
+			margin-top: 4px;
+		}
+
+		&__colorValueInput {
+			width: 100%;
+			min-width: 0;
+		}
+	}
+}